title: Top menu show and hide on div scroll
body: <p>I created a script that should show the menu is shaking up and hide it when you go down.
  Now, it works if the scroll is of the body but if i would do that with a div in overflow condition, how can i do this ?</p>
  
  <p>my script is very simple</p>
  
  <pre><code>var lastScroll = 0;
        $('#ipotetic div').scroll(function(event){
  
  
            var st = $(this).scrollTop();
            $('.header').stop();
  
            if (st &gt; 54) {
  
            $('.header').css({"box-shadow" : "0 4px 0 rgba(0,0,0, 0.1)"});  
  
            if (st &gt; lastScroll){
               //down
               $('.header').animate({top:'-54px'},200,'swing');
            }
            else {
               //up
               $('.header').animate({top:'0px'},200,'swing');
            }
            lastScroll = st;
            }
            else { $('.header').css({"top" : "0"}); $('.header').css({"box-shadow" : "none"}); }
        });
  </code></pre>
  
  <p>this is the div structure</p>
  
  <pre><code>&lt;div class="wrap"&gt;&lt;div class="overflower"&gt;&lt;div class="sizer"&gt;#content&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>.wrap {height:100%;position:relative;float:left;overflow:hidden;}
  .overflower {width:410px;overflow:auto;height: 100%;}
  .sizer {width:390px;}
  </code></pre>
  
  <p>It works perfectly with <code>$(window).scroll(function(event){</code>
  but, why with a div it doesn't work, any ideas ?</p>