jQuery-Element ändert sich nicht bei korrekter Funktion

Question

Ich möchte eine Navbar haben, die automatisch angezeigt wird, wenn Sie nicht oben auf der Seite sind, die funktioniert; Die Sache ist, wenn ich nach oben scrolle, ändert sich nichts. Kann jemand meinen Code ansehen und mir sagen, was ich ändern oder aktualisieren muss?

$(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 
 
     }); 
 
    } 
 
    }); 
 
});

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

Die console tut mir eine Rückkehr geben, aber die Seite scheint nicht zu ändern ..

Answer 1

Ich denke

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

ist eine Menge von Animationen Queuing auf #topnav und so zu versuchen, die Elementmitte Animation ändern wird keinen Effekt haben.

Sie können eine Markierung setzen, um sicherzustellen, dass die Animation auf einmal begrenzt ist. Zum Beispiel:

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}); 
     } 
})