スクロール位置を取得
公開日: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みたいにページ下部にきたら次の項目をロードしたり、記事終わりに他のおすすめ記事をひょこっと表示したりできそう。
同じカテゴリーのコンテンツ