粘贴到浏览器的标头

我创建了粘贴标头，它工作正常，但是当它粘到顶端时，菜单中会出现一些混乱现象。无法找出原因。粘贴到浏览器的标头

下面是代码

$(document).ready(function() { 
     // Check the initial Poistion of the Sticky Header 
     var stickyHeaderTop = $('.filter-header, .left-panel').offset().top; 

     $(window).scroll(function(){ 
       if($(window).scrollTop() > stickyHeaderTop) { 
         $('.filter-header').css({position: 'fixed', top: '0px'}); 
       } else { 
         $('.filter-header').css({position: 'static', top: '0px'}); 
       } 
     }); 
});

FIDDLE Updated

来源

2014-01-06 Sowmya

固定位置可能是问题，因为您的UL在滚动后没有将父div作为相对值。 – Era

固定位置被分配给用户滚动上的.filter-header的时刻，该元素已分配的宽度：100％属性值将引用视口而不是其直接父视图。它可能会导致列表项移动的不同宽度值的差异。如果范围允许，您可能想尝试设置一个静态宽度。 – vynx

是否有必要为这个使用JavaScript来实现？为什么不使用CSS？

像这样

实施例 - http://jsbin.com/iseXIqEf/11/edit

CSS

#header { position: fixed; width: 100%; background: #CCC; top:0; }

来源

2014-01-06 07:07:30 misterManSam

我有一个标题在粘性菜单上方，所以它应该只在用户向上滚动时才能保持顶部。 PLease检查我的更新演示 – Sowmya

.filter-header { 
/*try adding left and right positions*/ 
     left: 40px; 
     right: 40px; 
     background: none repeat scroll 0 0 #EEEEEE; 
     display: block; 
     height: 30px; 
     margin-bottom: 15px; 
     white-space: nowrap; 
     /*width: 100%;*/ 
     z-index: 10; 
    }

来源

2014-01-06 07:14:12 Era

.TOP不是一个jquery功能和引发错误。

var stickyHeaderTop = $('.filter-header, .left-panel').offset().top;

替换：

var stickyHeaderTop = $('.filter-header, .left-panel').offset();

的对象返回，并且可以像这样访问：

if($(window).scrollTop() > stickyHeaderTop.top) {

但是这可以用CSS来完成。

jquery offset（）：http://api.jquery.com/offset/一些很好的例子。

来源

2014-01-06 07:15:20 manta

当它向上滚动时，我通过将宽度添加到固定div来修复它。现在它向上滚动时不能伸展到全宽。

//Primary filter and left panel hing 
     // Check the initial Poistion of the Sticky Header 
     var stickyHeaderTop = $('.filter-header, .left-panel').offset().top; 

     $(window).scroll(function(){ 
       if($(window).scrollTop() > stickyHeaderTop) { 
         $('.filter-header').css({position: 'fixed', top: '0px', width: '97%'}); 
       } else { 
         $('.filter-header').css({position: 'static', top: '0px', width: '100%'}); 
       } 
     });

来源

2014-01-06 07:20:16 Sowmya

我应该对我的评论满意吗？哈哈。 – vynx

粘贴到浏览器的标头

回答

相关问题