css - Div Scroll With Page Using Jquery -

i'm trying make menu scroll user.

this relativly using:

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

what wanted animated type of scroll though, achievable using jquery:

$(window).scroll(function(){   $("#main-header-wrapper").stop().animate({"margintop": ($(window).scrolltop()) + "px", "marginleft":($(window).scrollleft()) + "px"}, "slow" ); }); 

with jquery solution menu bar slides down top after user stops scrolling.

but when user scrolls bar appears "stick" page before scrolling up.

what i'd achieve down scroll animation still working is, if user scrolls there no animation @ all. bar @ top of page during entire scroll.

codepen: http://codepen.io/think123/pen/maxlb

the jquery taken from: how make <div> move , down when i'm scrolling page?

i did come solution using accepted answer here: how can determine direction of jquery scroll event?

but method seems crude, achieves desired effect.

is there better way achieve this?

my solution:

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

i put codepen may view desired effect using solution: http://codepen.io/anon/pen/xjxpzv

to achieve effect, removed code @ st <= lastscrolltop. then, changed margintop top instead , when animation done, set position fixed top , left equals 0px. attached snippet code. effect want.

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 = "";  (var = 0; < 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>