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结构

<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

是的，只要内容溢出并且CSS <div>应用于div，就可以使用overflow:auto or scroll。它在documentation上有详细说明，我也在jsfiddle进行了测试。

顶部菜单显示并隐藏在div滚动上

1 个答案: