ユーザーがページを約100pxにスクロールしたときにのみ上部に固定したいナビゲーションバーがあります。
これを達成するための最良の方法はどれですか?
ここで動作するデモ... http://jsfiddle.net/eFCK3/1/
<div id="header-small">Header</div>
<div>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>
#header-small{
display:none;background:red;padding:2%;position:fixed;top:0px;width:960%;
}
$JQUERY
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#header-small').fadeIn();
} else {
$('#header-small').fadeOut();
}
});
jQuery を使用して scroll-Handler を追加します。$("html, body").scroll(yourHandler() {});
次に、目的の
$("html, body").scrollTop();
範囲までスクロールされているかどうかを確認してスクロール位置を確認し、ナビゲーション バーに css-Class を追加して、たとえば固定属性を追加するか、必要に応じてより複雑なものを追加します。
再びスクロールバックする場合は、クラスやその他の変更を削除することを忘れないでください。
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
//when page scrolls past 100px
} else {
//when page within 100px
}
});
お役に立てれば
これにより、ナビゲーションが上部に到達した瞬間にウィンドウの上部に固定されます.それが役立つことを願っています.
var $window = $(window),
$navigation = $('#navigation'),
elTop = $navigation.offset().top;
$window.scroll(function() {
$navigation.toggleClass('fixed', $window.scrollTop() > elTop);
});