WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

下までスクロールしたら要素を消す

前回のカリキュラムの続きの動画です。

ウィンドウなどの高さのの取得方法

//ページのサイズを取得
let page_w = document.documentElement.scrollWidth;   //ページの横幅
let page_h = document.documentElement.scrollHeight;  //ページ全体の高さ
 
//表示しているブラウザなどのサイズを取得
let win_w = document.documentElement.clientWidth;   //幅
let win_h = document.documentElement.clientHeight;  //高さ

サンプルコード

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<!-- 途中で表示され、下まできたら消える要素 -->
<div id="box_fixde"></div>
.box{
    margin: 100px auto;
    width: 300px;
    height: 300px;
    background: red;
}

#box_fixde{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    background: blue;
    visibility: hidden;
    transition: .5s;
    opacity: 0;
}
#box_fixde.on{
    visibility: inherit;
    opacity: 1;
}
'use strict';
{
    const $box_fixde = document.getElementById('box_fixde');
    window.addEventListener('scroll', () => {
        let scrollY = window.scrollY
        if(100 < scrollY){
            $box_fixde.classList.add('on');
        }else{
            $box_fixde.classList.remove('on');
        }
        let h = document.documentElement.scrollHeight;
        let win_h = document.documentElement.clientHeight;
        if ( h  == scrollY + win_h) {
            $box_fixde.classList.remove('on');
        }
    });
    
}