サンプルコード
<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');
}
});