WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

100pxスクロールしたら要素を出現させる

サンプルコード

<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;
}
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');
    }
});