jquery - 使用 jquery 滚动时如何替换 HTML 类

Question

<<header>
<nav class="navbar navbar-default top-postion navbar-up" role="navigation">
  <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#"><img src="images/kotakku-icon.png"> Kotakku</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav navbar-tabs navbar-right navbar-menu" role ="tablist">
    <li><a href="#home">Home</a></li>
    <li><a href="#product">Product</a></li>
    <li><a href="#team">Team</a></li>
    <li><a href="#contact">Contact</a></li>

  </ul>
</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

如何在滚动时将navbar-up类替换为navbar-down，并在滚动到页面顶部时再次返回该类

Answer 1

您可以使用 toggleClass 实现这种简单的方法:

$('nav').toggleClass("navbar-up navbar-down");

你可以将这段代码放在 window 滚动处理程序中:

$(window).scroll(function() {    
     // some logic here
});

最终代码:

$(window).scroll(function() {    

    var scroll = $(window).scrollTop();

    // you can do your own condition here
    if (scroll == 0)
    {
        $('.navbar-down').toggleClass("navbar-up navbar-down");
    }
    else
    {
        $('.navbar-up').toggleClass("navbar-up navbar-down");
    }

});

这样当 nav 有 navbar-up 类并滚动到 navbar-up 时更改为 navbar-down 和 vs 当它有navbar-down 并滚动到顶部然后它变为 navbar-up

您可以看到演示:http://jsfiddle.net/rdutuynb/