jquery - 将标题粘贴/铰链到浏览器

Question

我创建了粘性 header ，它工作正常，但当它粘在顶部时，菜单中会出现一些问题。无法弄清楚原因。

这是代码

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

Answer 1

.top 不是 jquery 函数，会抛出错误。

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

替换为:

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

返回一个对象，可以像这样访问:

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

不过这可以用 css 来完成。

jquery 偏移量():http://api.jquery.com/offset/一些很好的例子。