Div Scroll mit Seite mit Jquery

Question

Ich versuche, mein Menü mit dem Benutzer scrollen.

Dies wird relativly einfach mit:

#main-header-wrapper { 
    width: 100vw; 
    height: 75px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Was ich aber war ein animiertes Art von Scroll wollte, die erreichbare JQuery wurde mit:

$(window).scroll(function(){ 
    $("#main-header-wrapper").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow"); 
}); 

Mit dieser JQuery Lösung der Menüleiste nach unten gleitet von oben, nachdem der Benutzer das Scrollen beendet hat.

Wenn der Benutzer jedoch nach oben scrollt, scheint die Leiste auf der Seite zu "bleiben", bevor sie zurückscrollt.

Was ich erreichen möchte ist, dass die Down Scroll Animation immer noch so funktioniert, wie sie ist, aber wenn der Benutzer hoch scrollt, dann gibt es überhaupt keine Animation. Die Leiste befindet sich während des gesamten Scrolls ganz oben auf der Seite.

Codepen: http://codepen.io/think123/pen/mAxlb

Die JQuery wurde entnommen aus: How do I make a <div> move up and down when I'm scrolling the page?

ich mit einer Lösung zu kommen habe von hier aus der akzeptierten Antwort unter Verwendung: How can I determine the direction of a jQuery scroll event?

Aber diese Methode scheint nur grob, aber es erreicht den gewünschten Effekt.

Gibt es einen besseren Weg, dies zu erreichen?

Meine Lösung:

var lastScrollTop = 0; 
$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow"); 
    } else { 
     $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"}); 
    } 
    lastScrollTop = st; 
}); 

ich eine CodePen zusammen, so dass Sie den gewünschten Effekt mit meiner Lösung sehen kann: http://codepen.io/anon/pen/XjXpZv

Answer 1

die Wirkung zu erreichen, entfernte ich den Code an, wo st <= lastScrollTop. Dann änderte ich die marginTop zu top stattdessen und wenn die Animation fertig war, legte ich die Position auf fixed mit top und left entspricht 0px. Der Code wurde angehängt. Hoffentlich ist das der Effekt, den Sie wollen.

var lastScrollTop = 0; 
 
$(window).scroll(function(event){ 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop){ 
 
     $("#div").css("position", "absolute"); 
 
     $("#div").stop().animate({"top": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, {duration: "slow", done: function(){ 
 
    $("#div").css("position", "fixed"); 
 
    $("#div").css("top", "0px"); 
 
    $("#div").css("left", "0px"); 
 
     }}); 
 
    } else { 
 

 
    } 
 
    lastScrollTop = st; 
 
}); 
 
var totaltext = ""; 
 
for (var i = 0; i < 100; i++) { 
 
    totaltext += "scroll!<br />"; 
 
} 
 
$("#div2").html(totaltext);

#div { 
 
    background-color: #fca9a9; 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="div">Tralalalala</div> 
 
<div id="div2"></div>