jQuery animiert läuft nur einmal korrekt, dann beginnt seltsam zu verhalten

Question

Ich habe den folgenden JavaScript/jQuery-Code. Ich sehe kein Problem damit, aber es funktioniert nicht richtig.

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
     if($(window).scrollTop() > 0) { 
 
      $("#forumHeader").animate({top: '250px'}); 
 
     } 
 
     else 
 
     { 
 
      $("#forumHeader").animate({top: '60px'}); 
 
     } 
 
    }); 
 
});

#forumHeader 
 
{ 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 0%; 
 
    height: 100px; 
 
    width: 200px; 
 
    color: white; 
 
    background-color: red; 
 
} 
 

 
#content 
 
{ 
 
    height: 1000px; 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="forumHeader">Forum Header</div> 
 
<div id="content">Some content here</div>

Das erste Mal, dass ich es nach unten scrollen funktioniert, wie es sollte und #forumHeader oben Animieren: 250px. Aber wenn ich wieder zurück blättern kann, kann es mehrere Sekunden dauern, bevor es wieder nach oben animiert: 60px. Manchmal ändert es sich hin und her, manchmal kann es gar nichts tun. Was ist das Problem? Bitte helfen ..

Answer 1

ich würde die jQuery verwenden, um hinzuzufügen, und eine Klasse zu entfernen, dann einen CSS-Übergang verwenden

$(document).ready(function(){ 

    // EDIT - Move the selector outside of the scroll event as suggested 
    var header = $("#forumHeader"); 

    $(window).scroll(function(){ 

     if($(window).scrollTop() > 0) { 
      header.addClass('slide'); 
     } else { 
      header.removeClass('slide'); 
     } 
    }); 
}); 

#forumHeader{ 
    top: 60px; 
    -webkit-transition: top 500ms ease-out ; 
    -moz-transition: top 500ms ease-out ; 
    -o-transition: top 500ms ease-out ; 
    transition: top 500ms ease-out ; 
} 
#forumHeader.slide{ 
    top: 250px; 
} 
#content 
{ 
height: 1000px; 
background-color: gray; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="forumHeader">Forum Header</div> 
<div id="content">Some content here</div> 

hoffte, das hilft