【JavaScript】position:fixed要素をスクロールさせる

概要

通常、CSSのpositionでfixedを指定するとWindowの左上を基準とした絶対位置でスクロール固定されるがJavaScriptを用いるとスクロールできるようになる。

例

id="example"と指定した要素に対して処理をかける。

＜事前準備＞

window.onload=function(){
    var example = document.getElementById("example");
    
    window.addEventListener('scroll',_handleScroll,false);
}

--ポイント解説--

windowを読み込んだときにdocument.getElementByIdで要素取得。 window.addEventListenerでイベントを登録。

＜横スクロールさせる＞

window.addEventListener('scroll',_handleScroll,false);の下に入力

function _handleScroll(){
   example.style.left=-window.scrollX+ "px";
 }

--ポイント解説--

window.scrollXには横スクロール量が代入される。 つまりページが左にスクロールされているときに正の値となる。よって必ず最初にマイナスをつける。

また左50pxの位置からスクロールさせる場合

example.style.left=50-window.scrollX+ "px";

とする

＜縦スクロールさせる＞

window.addEventListener('scroll',_handleScroll,false);の下に入力

function _handleScroll(){
   example.style.top=-window.scrollY+ "px";
 }

--ポイント解説--

window.scrollYには縦スクロール量が代入される。 つまりページが下にスクロールされているときに正の値となる。よって必ず最初にマイナスをつける。

また上50pxの位置からスクロールさせる場合

example.style.top=50-window.scrollY+ "px";

とする