【JavaScript】サイドバーに今どこを読んでいるかを表示してみる

こんにちは！セミマサです。

JavaScriptを使ってサイドバーに今どこを読んでいるかを表示してみました。

デモサイト
今回のスクリプト
おわりに

デモサイト

今回のデモサイトです。

画面サイズ480px以下の場合サイドバーを表示しないようにしているのでPCかタブレットでご確認ください。

今回のスクリプト

const heading_list =  document.getElementsByTagName('h2');
let heading_top = [];
for(let i = 0; i < heading_list.length;i++){
    heading_top[i] = heading_list[i].offsetTop;
}
const side_list =document.getElementsByClassName('side-content');

const present_Location = ()=>{
    sidebar_Initialize();
    let windowTop = window.scrollY;
    if(heading_top[0] < windowTop && windowTop < heading_top[1] ){
        side_list[0].classList.add('is-active');
    }else if(heading_top[1] < windowTop && windowTop < heading_top[2] ){
        side_list[1].classList.add('is-active');
    }else if(heading_top[2] < windowTop && windowTop <heading_top[3] ){
        side_list[2].classList.add('is-active');
    }else if(heading_top[3] < windowTop ){
        side_list[3].classList.add('is-active');
    }
}
const sidebar_Initialize = ()=>{
    for(let i = 0;i<side_list.length;i++){
        side_list[i].classList.remove('is-active');
    }
}

const reAssignment = ()=>{
    for(let i = 0; i < heading_list.length;i++){
        heading_top[i] = heading_list[i].offsetTop;
    }
}
window.addEventListener('load', present_Location);
window.addEventListener('scroll', present_Location);
window.addEventListener('resize',reAssignment);

・heading_listに見出しのリストを格納

・heading_topに各見出しの位置を格納

・side_listにサイドバーの見出しリストを格納

・ウィンドウが読み込まれた時とスクロールした時にpresent_Location関数を実行します。

・画面のリサイズ時にreAssignment関数を実行します。