Question

当它碰到窗口顶部时，我想要一个导航栏（位置：固定）。但是如果用户向上滚动，我还希望元素恢复正常定位。

以下代码使元素保持不变，但在滚动时，事件会持续触发，从而导致元素闪烁。如果我删除'else removeClass（）'，它会平滑（并停止闪烁）但是在我向上滚动到顶部后元素保持固定。想法？

相关CSS：

.fixed-object {
    width:100%;
    background-color:tomato;
}

.stick {
    position:fixed;
    top:0;
}

jQuery的：

   $(window).scroll(function(){

    var elementDepth = $('.fixed-object').offset().top;
    var scrollDepth = $(window).scrollTop();

    if (scrollDepth >= elementDepth) {
        $('.fixed-object').addClass('stick');
    } else {
        $('.fixed-object').removeClass('stick');
    }


});

Answer 1

让它变得简单.....

将elementDepth声明为GLOBAL变量......它将起作用

var elementDepth = $('.fixed-object').offset().top;
  $(window).scroll(function(){
    var scrollDepth = $(window).scrollTop();

    if (scrollDepth >= elementDepth) {
        $('.fixed-object').addClass('stick');
    } else {
        $('.fixed-object').removeClass('stick');
    }
});

Live Demo

如何让这个jQuery滚动事件不断发射？

1 个答案: