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主体中，我已经定义了标头标签，默认情况下将类设置为大，内部没有任何信息只是为了清楚地查看脚本的行为。

虽然在我定义的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");

当你从一个较大的类更改为一个较小的类时，这个选择器将不再起作用。

此外，缓存此值是没有用的，因为seletors会根据新的类值进行更改。

因为您使用了窗口函数，所以文档就绪（即：$（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/>

scrollTop函数用于动态调整大小菜单

1 个答案: