0

メニューが揺れていることを示し、下に行くと非表示にするスクリプトを作成しました。さて、スクロールが本体の場合は機能しますが、オーバーフロー状態の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構造です

<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で機能しないのですか、アイデアはありますか?

4

1 に答える 1

0

はい<div>、コンテンツがオーバーフローし、CSSoverflow:auto or scrollが div に適用されている限り可能です。ドキュメントで詳しく説明されており、 jsfiddleでもテストしました。

于 2013-11-01T13:36:42.270 に答える