div Jqueryを使用したページでのスクロール

Question

私は自分のメニューをスクロールしようとしています。

はこのrelativly単純に使用している：私は望んでいた

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

何、しかしスクロールのアニメーションのタイプだった実現可能なのjQueryを使用した：

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

メニューバーが滑り落ちるこのjQueryのソリューションでユーザーがスクロールを停止した後、上から移動します。

しかし、ユーザーがスクロールすると、バーはスクロールして戻る前にページに「スティック」しているように見えます。

私が達成したいのは、ダウンスクロールアニメーションはまだそのまま動作していますが、ユーザーがスクロールしてアニメーションがまったくない場合です。バーは、スクロール全体の間、ページの上部にあります。

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

のjQueryのから撮影された：How can I determine the direction of a jQuery scroll event?

しかし、この方法はただ原油をようだが、私はここから受け入れ答えを使用して解決策を考え出すでしたHow do I make a <div> move up and down when I'm scrolling the page?

所望の効果を達成する。

これを達成するためのより良い方法はありますか？

私のソリューション：

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

あなたは私のソリューションを使用して所望の効果を見ることができるので、私は一緒にCodePenを置く：http://codepen.io/anon/pen/XjXpZv

Answer 1

を効果を達成するために、私はどこst <= lastScrollTopでコードを削除しました。次に、marginTopをtopに変更しました。アニメーションが完了したら、fixedをtop、leftを0pxに設定しました。スニペットコードを添付しました。うまくいけば、これはあなたが望む効果です。

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>