ブラウザがスクロールしてから何かアクションを起こすというコーディングをすることが多々あります。
今回はありがちなスクロールの挙動をご紹介します。

デモはこちらです。

値の取得

//ブラウザのスクロール位置を取得
$(window).scrollTop();

//指定要素のドキュメント上の表示位置を取得
$("hoge").offset().top;

1-1 指定の位置よりメニューを固定表示

デモではナビゲーションがスクロールをしてもTOPに固定表示されるようにしました。

HTML

<nav>
 <ul>
   <li>navi1</li>
   <li>navi2</li>
   <li>navi3</li>
   <li>navi4</li>
 </ul>
</nav>

CSS

#wrapper{
    padding: 100px 0 0 0;
}
nav{
	width: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
nav li{
	padding: 14px 30px;
	float: left;
}
.navFixed{
	position: fixed;
	top: 0;
	margin: 0;
}

jQuery

$(window).load(function() {
   var nav    = $("nav");
   var navTop = nav.offset().top;
   $(window).scroll(function () {
      if($(window).scrollTop() > navTop) {
         nav.addClass("navFixed");
      } else {
         nav.removeClass("navFixed");
      }
   });
});

1-2 スクロールすると右下にボタンを表示

デモではスクロールがされたらページトップボタンが表示されるようにしました。

HTML

<div id="pageBtn"><a href="#top"><i class="fa fa-chevron-up fa-2"></i></a></div>

CSS

#pageBtn{
	border: 1px solid #000;
	border-radius: 10px;
	clear: both;
	width: 50px;
	height: 50px;
	z-index: 2;
	position: fixed;
	bottom: 50px;
	right: 50px;
}

jQuery

$(window).scroll(function(){
   var winTop = $(window).scrollTop();
   if(winTop > 0){
      $("#pageBtn").fadeIn();
   }else{
      $("#pageBtn").fadeOut();
   }
});

デモはこちらです。