Question

我希望屏幕顶部有一个固定的标题而不知道scrollTop()位置，因为它的变量（标题上面有一个元素，可变高度）。

由于offset().top，我在变量中保存了垂直间距的值，问题是当标题固定在顶部时，此值会变为0。所以我无法删除之前添加的课程。

var win = $(window);

win.on('load scroll resize', function(){
    var header  = $('#header-v1'),
        ht      = header.offset().top, // Get the offset from the top
        st      = win.scrollTop(),
        height  = ht - st; // Get the offset from the top of the viewable screen

    var get_h = 1,
        j;

    if (st <= ht) {
        for (j = 0; j < height; j++) {
            get_h += 1;
        }
    } else if (st >= get_h) {
        header.addClass("fixed-nav");

    } else {
        header.removeClass("fixed-nav");
    }

});

我想制作一个计数器来恢复header.offset().top值，因为它在向下滚动页面后会0。我还不确定这是不是这样。有什么建议吗？

编辑：以下代码应该有效。这是一个改编from this one。但我仍然遇到同样的问题：班级没有删除。

var win     = $(window),
    header  = $('#header-v1'),
    ht      = header.offset().top;

win.on('scroll', function(){
    var st      = win.scrollTop();
        ht      = header.offset().top;

    if (st >= ht) {
        header.addClass("fixed-nav");
    } else if (st < ht) {
        header.removeClass("fixed-nav");
    }
});

Answer 1

由于jQuery函数one()，我可以自己修复它。

var win     = $(window),
    header  = $('#header-v1');
    var ht;

// Get the offset from the top into another scroll event
// ... using the function "one()".
win.one('scroll', function(){
    ht  = header.offset().top;
});

win.on('scroll', function(){
    var st = win.scrollTop();
    if (st >= ht) {
        header.addClass("fixed-nav");
    } else if (st < ht) {
        header.removeClass("fixed-nav");
    }
});

实际上，在header上方，我有一个带有按钮的顶部栏，该按钮显示功能slideToggle()的更多内容。所以每次点击后顶部的高度都会发生变化（显示/隐藏高度可变的内容），这就是解决方案：

win.on("load resize",function(){
    // Get the offset
    win.one('scroll', function(){
        ht  = header.offset().top;
    });

    $(".navbtn").toggle(function() {
        // The user clicks to show more content, get the offset again
        win.one('scroll', function(){
            ht  = header.offset().top;
        });
    }, function () {
        // Get the offset again when the content is hidden
        win.one('scroll', function(){
            ht  = header.offset().top;
        });
    });
});

代码在这里运行：jsfiddle。尝试更改CSS中topbar的高度，并使用确定的偏移量查看menu如何固定在顶部。

固定滚动元素而不知道scrollTop（）位置

1 个答案: