jquery - scrollTop()= div时如何删除类?
问题描述
我想滚动到我的导航,然后更改导航的类,但我的脚本不起作用。
$(window).scroll(function() {
if ($(window).scrollTop == $('.menu_nav').offset().top) {
$('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_nav">
<ul>
<li><a href="#">O MNĚ</a>
</li>
<li><a href="#">Reference</a>
</li>
<li><a href="#">Kontaktuj mě</a>
</li>
</ul>
</div>
解决方案
您的代码不起作用的原因是因为您.
在.addClass()
和.removeClass()
$('.menu_nav').removeClass('.menu_nav').addClass('.nav_scroll');
应该$('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');
演示
$(document).ready(function() {
$(window).scroll(function() {
if ($(".menu_nav").length > 0 && $(window).scrollTop() == $('.menu_nav').offset().top) {
$('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');
}
});
});
.menu {
height: 200vh;
background: yellow;
}
.menu_nav {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
}
.nav_scroll {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="menu_nav">
<ul>
<li><a href="#">O MNĚ</a>
</li>
<li><a href="#">Reference</a>
</li>
<li><a href="#">Kontaktuj mě</a>
</li>
</ul>
</div>
</div>
推荐阅读
- android - 如何在android中使用OkHttp3缓存数据
- ruby-on-rails - 无法更新文章的图片
- android - 未聚焦时如何更改textinput edittext下划线颜色?
- java - 使用枚举“列出”单例子类
- python - 如何使用前一行值以及同一行中其他列中的值来计算熊猫中列的值
- sql-server - 有没有办法根据另一个模型的创建日期过滤一个模型?
- selenium - 如何获取输入中的值
- c# - 为什么 DateTime.UtcNow.Subtract 有时会给我一个很大的数字?
- python - pip卸载的顺序重要吗?
- r - 如何避免模块代码过早运行?