Главное меню show and hide on div scroll

Question

Я создал сценарий, который должен показать, что меню встряхивается и спрятаться, когда вы спускаетесь. Теперь он работает, если свиток имеет тело, но если бы я сделал это с условием переполнения div, как я могу это сделать?

мой сценарий очень прост

var lastScroll = 0; 
     $('#ipotetic div').scroll(function(event){ 


      var st = $(this).scrollTop(); 
      $('.header').stop(); 

      if (st > 54) { 

      $('.header').css({"box-shadow" : "0 4px 0 rgba(0,0,0, 0.1)"}); 

      if (st > 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"}); } 
     }); 

это структура ДИВ

<div class="wrap"><div class="overflower"><div class="sizer">#content</div></div></div> 

и CSS

.wrap {height:100%;position:relative;float:left;overflow:hidden;} 
.overflower {width:410px;overflow:auto;height: 100%;} 
.sizer {width:390px;} 

Он отлично работает с $(window).scroll(function(event){ , но почему с DIV это не работает, никаких идей?

Answer 1

Да, это возможно с <div> до тех пор, пока содержимое переполняется и CSS overflow:auto or scroll применяется к div. Он подробно описан на documentation, и я также проверил на jsfiddle.