Question

我想创建一个更改导航类名的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');
});

我希望一旦页面滚动到顶部，就会发生此事件。如果页面滚动回到顶部我希望它回到原始状态。目前，当我滚动时，没有任何反应。

Answer 1

您可以使用

找到当前滚动位置

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/

在页面滚动上更改类名称

1 个答案: