$(() => { // スクロール量に合わせて要素の幅を変える関数 const scrollColourBar = () => { window.requestAnimationFrame(() => { const scrollAmount = $(document).scrollTop(); const documentHeight = $(document).height(); const windowHeight = $(window).height(); const scrollWidth = scrollAmount / (documentHeight - windowHeight) * 110; const targetElem = $('.line'); targetElem.css('height', scrollWidth + '%'); }); }; // 初期表示時 (ハッシュ付きでアクセスした場合にもスクロールする) scrollColourBar(); // スクロール・リサイズ時に再描画する $(window).on('scroll resize', scrollColourBar); });