Question

我希望有一个导航栏，当你不在页面顶部时会自动显示，这是有效的;事情是当我滚动回到顶部没有任何变化。有人可以查看我的代码并告诉我需要更改或更新的内容吗？

＆＃13;

$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(window).scrollTop());
    if ($(window).scrollTop() != 0) {
      $("#topnav").animate({
        opacity: 1
      }, 300);
    } else if ($(window).scrollTop() == 0) {
      console.log("done");
      $("#topnav").css({
        opacity: 0
      });
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

console确实给了我回报，但页面似乎没有改变..

Answer 1

我认为

if ($(window).scrollTop() != 0) {
   $("#topnav").animate({opacity: 1}, 300);
}

在#topnav上排队了很多动画，因此尝试更改动画中的元素将不起作用。

您可以设置标记以确保动画限制为一次。例如：

var flag = false;

$(window).scroll(function(){
    if ($(window).scrollTop() != 0) {
        if(!flag){
            $("#topnav").animate({opacity: 1}, 300, function(){
              flag = false;
            });
              flag = true;
            }
        }
        else if ($(window).scrollTop() == 0) {
            console.log("done");
            $("#topnav").css({opacity: 0});
        }
})

jQuery元素没有改变正确的功能

1 个答案: