Learning site for website creation

スクロール位置を取得

公開日:2014年03月27日

スクロール位置を取得して80%以上スクロールしたら背景色を変えるプログラム。

サンプルデータ

$(function() {
  $(window).scroll(function() {
    //全体の高さを取得
    var documentHeight  = $(document).height();
    //画面の高さを取得
    var windowHeight    = $(window).height();
    //スクロール上部位置を取得
    var windowScrollTop = $(window).scrollTop();
    //スクロール下部位置を取得
    var scrollPosition  = windowHeight + windowScrollTop;
    //スクロール位置(%)
    var scrollParcent  = scrollPosition/documentHeight*100;

    //スクロール位置80%で背景色変更
    if(scrollParcent > 80){
      $('body').css({'background-color':'#FCC'});
    }else{
      $('body').css({'background-color':'#FFF'});
    }
  });
});

Twitterみたいにページ下部にきたら次の項目をロードしたり、記事終わりに他のおすすめ記事をひょこっと表示したりできそう。