粘性标题 - 滚动 - CSS / jQuery答案

【问题标题】：Sticky Header - Scroll - CSS / jQuery粘性标题 - 滚动 - CSS / jQuery
【发布时间】：2011-11-21 15:44:39
【问题描述】：

我希望创建一个粘性标题。每次用户向下滚动并且原始标题消失时，“粘性”标题应该启动。

我目前使用这个：

$(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");
        }
    });
});

虽然，当前的添加类“sticky”，只要用户只是滚动，而不是当原始标题应该消失时。

问候

【问题讨论】：

这工作正常：jsfiddle.net/purmou/ZQwhL/embedded/result
但我的原始标题位于顶部开始。
如果它在顶部，那么为什么用户必须滚动它才能保持粘性？只需将其设置为 position:fixed; 即可：jsfiddle.net/purmou/ZQwhL/1/embedded/result,html,css

标签： jquery css header sticky

【解决方案1】：

用div 和id="whateveryouwannacallit" 包裹他

并设置：

#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}

【讨论】：

【解决方案2】：

实际上，您不需要包装。这是代码

$(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/

【讨论】：