javascript - 动态调整菜单大小的 scrollTop 函数

Question

我正在尝试创建一个动态菜单，该菜单会在用户向下滚动时自动调整大小。经过多次搜索，我已将此脚本添加到 html 文件的头部:

<script type="text/javascript">
$(function() {
    var header = $(".large");
    $(window).scroll(function() {
       var scroll = $(window).scrollTop();
            if (scroll >= 50) {
            header.removeClass('large').addClass("small");
        } else {
            header.removeClass("small").addClass('large');
        }
    });
});
</script>

在 html 正文中，我定义了 header 标记，默认为 large 类，内部没有任何信息，只是为了清楚地查看脚本的行为。

而在我定义的css中，根据页面中其他div的定义，有如下特点:

header.large{position:fixed; width:100%; height:20%; background-color:#00BFFF; top:0px; left:0; z-index:1;}

header.small{position:fixed; width:100%; height:7%; background-color:#000000; top:0px; left:0; z-index:1;}

为了验证脚本是否激活，我已经更改了小类的颜色，但它仍然没有响应。你能帮助我吗？谢谢

Answer 1

您的问题出在这一行:

var header = $(".large");

当您从大类更改为小类时，此选择器将不再起作用。

此外，缓存这个值是没有用的，因为选择器会根据新的类值而改变。

因为您使用窗口函数准备好文档(即:$(function() {) 是无用的。

我的代码片段(我使用了一个 div 和一些文本而不是标题):

$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  if (scroll >= 50) {
    $('.large').removeClass("large").addClass('small');
  } else {
    $('.small').removeClass('small').addClass("large");
  }
});

div.large {
  position: fixed;
  width: 100%;
  height: 20%;
  background-color: #00BFFF;
  top: 0px;
  left: 0;
  z-index: 1;
}

div.small {
  position: fixed;
  width: 100%;
  height: 7%;
  background-color: #000000;
  top: 0px;
  left: 0;
  z-index: 1;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div  class="large">
bbbbbbbbbbbbbbbbbbbbbbbb<br/>
    
    bbbbbbbbbbbb<br/>
</div>


a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>