前回のカリキュラムの続きの動画です。
ウィンドウなどの高さのの取得方法
//ページのサイズを取得
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');
}
});
}