javascript - 在页面滚动上更改类(class)名称

我想进行Java脚本调用，以更改导航的类名称。

页面首次加载时，我的导航是这样的：

<nav class="navbar navbar-inverse" role="navigation" id="topNav">

我想将其更改为以下内容：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topNav">

我的JavaScript是以下内容：

$(window).scroll(function() {
   $('#topNav').className('navbar navbar-inverse navbar-fixed-top');
});

我希望此事件在页面滚动到最上方时立即发生。如果页面滚动回到顶部，我希望它回到原始状态。目前，当我滚动时，什么都没有发生。

最佳答案

您可以使用以下命令找到当前滚动位置

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

如果scrollPosition是0，则表示您位于最上方。如果大于0，则表示用户已向下滚动。

$(window).scroll(function() {
    if ($(window).scrollTop() === 0) {
        // We are at the top of the page and want to remove the class
        $('#topNav').removeClass('navbar-fixed-top');
    } else {
        $('#topNav').addClass('navbar-fixed-top');
    }
});

一旦用户滚动到顶部，此代码就会从导航栏中删除类navbar-fixed-top，并且一旦用户滚动到顶部，则将该类添加到导航栏中。

假设您的CSS看起来像这样：

.navbar-fixed-top {
    position: fixed;
    top: 0;
}

仅为navbar-fixed-top左右的值添加类scrollPosition > 200时，可以创建很酷的效果。

看到这个小提琴：http://jsfiddle.net/TnTRE/1/

关于javascript - 在页面滚动上更改类(class)名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20896827/