Sticky Header – Scroll – CSS / jQuery

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

我目前使用这个：

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

虽然，当前用户只是在滚动时添加类“粘性”，而不是在原始标题消失时。

问候

Answer 1

用id="whateveryouwannacallit"的div包裹他

并设置：

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

Answer 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/