Tweet

Pocket

画面スクロールして指定要素が画面上部にきたら固定（fixed）する方法です。

javascript

$(function(){
	var gNavi = $(".naviArea");
	var boxTop = gNavi.offset().top;

	$(window).scroll(function () {
		if($(window).scrollTop() >= boxTop) {
			gNavi.addClass("fixed");
			$("body").css("margin-top","79px");
		} else {
			gNavi.removeClass("fixed");
			$("body").css("margin-top","0px");
		}
	});
});

※クラス「fixed」にはdisplay:fixed;が指定されているものとする。