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

Question

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

我想做http://www.univision.com/noticias做的事情。

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

谢谢！

Answer 1

使用CSS和一些JavaScript可以实现这种效果。您可以添加JavaScript scroll eventlistener，检查所需的偏移量，并相应地从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();

当然，在您的情况下，您可能想要更改标头的引导类（正如您所说的使用Bootstrap）。 E.g。

如果您有三个菜单

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

让我们说当用户滚动时你要隐藏菜单3 并将浏览器总宽度分成两半（菜单1 和菜单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();

希望它有所帮助。