jquery - 滚动时如何更改导航栏内容？

Question

这不仅仅是改变特定的 CSS，如背景颜色，而是实际显示不同的内容，或相同的内容但重新排列不同。我正在使用 Bootstrap 。

我想做什么http://www.univision.com/noticias做过。

我是否应该创建一个不同的导航栏并使用 jQuery 使其显示或消失，具体取决于用户是否已滚动？你们知道这个的代码吗？

谢谢!

Answer 1

可以使用 CSS 和一点点 JavaScript 来实现这种效果。您可以添加一个 JavaScript 滚动事件监听器，检查所需的偏移量，并相应地从 html 元素中添加或删除 CSS 类。

示例:

HTML:

<h1 class="default-style">Hello World</h1>

CSS:

.default-style {
    background-color: yellow;
}
.changed-style {
    background-color: green;
}

Jquery:

function init() {
$(window).scroll(function () {
    var distanceY = window.pageYOffset;
    var breakpoint = 300; // you can change this value according to your layouts
    var elementToChange = $(".default-style");
    if (distanceY > breakpoint) {
        elementToChange.addClass("changed-style");
    }
    else {
        if (elementToChange.hasClass("default-style")) {
            elementToChange.removeClass("changed-style");
        }
    }
});
}

window.onload = init();

当然，在您的情况下，您可能想要更改 header 的 Bootstrap 类(正如您所说的那样，您正在使用 Bootstrap )。例如

如果你有三个菜单

<div class="col-md-4 menu-1">Home</div>
<div class="col-md-4 menu-2">About</div>
<div class="col-md-4 menu-3">Contact</div>

假设当用户滚动时您想要隐藏Menu 3 并将浏览器总宽度分成两半(对于Menu 1 和Menu 2).你可以这样做:

function init() {
$(window).scroll(function () {
    var distanceY = window.pageYOffset;
    var breakpoint = 300; // you can change this value according to your layouts
    var menu1 = $(".menu-1"), menu2 = $(".menu-2"), menu3 = $(".menu-3");
    if (distanceY > breakpoint) {
        menu3.hide();
        menu1.addClass("col-md-6");
        menu2.addClass("col-md-6");
    }
    else {
        if (menu1.hasClass("col-md-6") || menu2.hasClass("col-md-6")) {
            menu1.removeClass("col-md-6");
            menu2.removeClass("col-md-6");
        }
    }
});
}

window.onload = init();

希望对您有所帮助。