5

スティッキーヘッダーを作成したいと思います。ユーザーが下にスクロールして元のヘッダーが消えるたびに、「スティッキー」ヘッダーが起動するはずです。

私は現在これを使用しています：

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

ただし、現在のクラスでは、ユーザーがスクロールを実行するたびに「スティッキー」クラスが追加され、元のヘッダーを削除する必要がある場合は追加されません。

よろしく

4

2 に答える 2

3

divで彼を包むid="whateveryouwannacallit"

と設定：

#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}
于 2012-01-14T16:37:30.283 に答える
1

実際、ラッピングは必要ありません。ここにコードがあります

$(document).ready(function() {
  var stuck = $('#header');
  var start = $(div).offset().top;
  $.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static');
    $(stuck).css('top',((p)>start) ? '0px' : '');
  });
});

クレジットはこのページに送られます: http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/

于 2013-01-20T20:40:09.773 に答える