当scrollTop()= div时如何删除类?

时间:2019-01-02 19:41:37

标签: jquery css

我想滚动到导航,然后更改导航的类,但是我的脚本不起作用。

$(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>

1 个答案:

答案 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>