我想滚动到导航,然后更改导航的类,但是我的脚本不起作用。
$(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>
答案 0 :(得分:1)
代码不起作用的原因是,您在.
和.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>