Question

从页面底部滚动到顶部时，我试图实现navbar要修复。当我们从上到下滚动时，位置必须是相对的。

当我从底部滚动回到菜单时，我想添加类将其删除，直到再次到达菜单。

我尝试将scrollTop的值设置为负数，但对我没有帮助。

谢谢！！

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
        $('nav').addClass("sticky");
    } else {
        $('nav').removeClass("sticky");
    }
});


$(window).scroll(function() {
    if ($(this).scrollTop() > -200) {
        $('nav').addClass("sticky");
    } else {
        $('nav').removeClass("sticky");
    }
});

* {
    box-sizing: border-box;
}

nav {
    height: 70px;
    background: #f00;
    position:relative;
}

nav.sticky {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1049;
}

section {
    height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav></nav>

<section></section>

Answer 1

$(window).scroll(function() {
  let offs = $(this).scrollTop();
    if (Math.abs(offs) > 200) {
        $('nav').addClass("sticky");
    } else {
        $('nav').removeClass("sticky");
    }
});

* {
    box-sizing: border-box;
}

nav {
    height: 70px;
    background: #f00;
    position:relative;
}

nav.sticky {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1049;
}

section {
    height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav></nav>

<section>dawdwapjdawopidjawpio</section>

工作正常

Answer 2

只需通过将current scroll值与last scrolled值进行比较来检测滚动方向即可。

var lastScrollTop = 0;
$(window).scroll(function(event){
   var currentScrollTop = $(this).scrollTop();
  
   if (currentScrollTop > lastScrollTop){
        $('#test').html(currentScrollTop +' scrolling down....');
        $('nav').removeClass("sticky");
   } else {
       $('#test').html(currentScrollTop +'  scrolling up');
       $('nav').addClass("sticky");
   }
  
   lastScrollTop = currentScrollTop;
});

* {
    box-sizing: border-box;
}

nav {
    height: 70px;
    background: #f00;
    position:relative;
}

nav.sticky {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1049;
}

section {
    height: 900px;
}

#test {position: fixed; bottom: 10px; left: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav></nav>

<section></section>

<!-- for test -->
 <span id="test"></span>

Answer 3

按如下所示修改您的Jquery，它将起作用：

$(document).ready(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('nav').addClass("sticky");
        } else {
            $('nav').removeClass("sticky");
        }
    });
});

Answer 4

合并后的答案。我已经使用这些答案找到了正确的解决方案。

我只是在另一个条件下添加了值0，这有助于我达到期望的结果。

只需在绿色背景下查看结果即可。

谢谢。

var lastScrollTop = 0;
$(window).scroll(function(event) {
    var currentScrollTop = $(this).scrollTop();

    if (currentScrollTop > lastScrollTop) {
        $('nav').removeClass("sticky");
    } else if (currentScrollTop == 0) {
        $('nav').removeClass("sticky");
    } else {
        $('nav').addClass("sticky");
    }

    lastScrollTop = currentScrollTop;
});

* {
    box-sizing: border-box;
}

nav {
    height: 70px;
    background: #f00;
    position: relative;
}

nav.sticky {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1049;
    background:green;
}

section {
    height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav></nav>

<section></section>

Answer 5

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
         $('nav').removeClass("sticky");

   } else {
      $('nav').addClass("sticky");
   }
   lastScrollTop = st;
});

* {
    box-sizing: border-box;
}

nav {
    height: 70px;
    background: #f00;
    position:relative;
}

nav.sticky {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1049;
}

section {
    height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav></nav>

<section></section>

您必须保存ScrollTop值并进行比较！

jQuery滚动到底部addClass不起作用

5 个答案: