粘性导航无法正常工作

Question

一旦滚动条点击该菜单，我就会尝试将“固定”类添加到菜单中。我已经设法让它工作，但是一旦用户滚动到顶部就删除了类。

以下是我正在处理的网站：http://www.allbyor.com/

这是我的JS代码：

$(window).bind('scroll', function () {
    var menu = $('.bottom-row');
    if ($(window).scrollTop() >= menu.offset().top) {
        menu.addClass('menufix');
    } else {
        menu.removeClass('menufix');
    }
});

Answer 1

您需要在变量中注册菜单的原始值offset().top，因为一旦您将其类更改为固定，最高值将是与$(window).scrollTop()相同。

JSFiddle demo

var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;

$(window).bind('scroll', function () {
    if ($(window).scrollTop() >= menu_top_value) {
        menu.addClass('menufix');

    } else {
        menu.removeClass('menufix');
    }
});