滚动时折叠Bootstrap导航栏

Question

我正在使用Bootstrap灰度主题进行项目开发，其中有一个导航栏会在滚动时折叠，或者当我跳转到同一页面上的一个链接（例如#download）时也会折叠。

问题是，当我从其他页面跳转到锚链接时，导航栏不会折叠，直到我滚动页面。

我猜解决方案在于添加JavaScript代码行，但我真的不知道要添加什么，因为我不懂JavaScript。 :-(

// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

请帮帮忙。:) :-*

- Mountain Spring

Answer 1

您需要在页面加载时以及窗口滚动时运行检查，通过将检查页面偏移量的逻辑放入函数中，并从文档准备好和窗口滚动中运行它，您可以在不重复任何代码的情况下完成此操作。

$(document).ready(function() {

    // Put your offset checking in a function
    function checkOffset() {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        }     
        else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
    }

    // Run it when the page loads
    checkOffset();


    // Run function when scrolling
    $(window).scroll(function() {
        checkOffset();
    });
});

编辑：

我认为你可以通过使用以下代码替换checkOffset函数来进一步缩短代码：

// Put your offset checking in a function
function checkOffset() {
    $(".navbar-fixed-top").toggleClass("top-nav-collapse", $(".navbar").offset().top > 50);
}

我没有测试过，但只要toggleClass中的第二个参数返回一个布尔值，它将根据页面的偏移量添加或删除类，而不需要使用if语句。

- Tim Sheehan

---

@MountainSpring 没问题，伙计 :) 如果这解决了你的问题，请随意将其标记为答案以关闭它。 - Tim Sheehan

Answer 2

您也可以使用：

 $(document).ready(function() {
        function checkOffset() {
            $(".navbar").removeClass("show");
        }
        // Run function when scrolling
        $(window).scroll(function() {
            checkOffset();
        });
        // Run function on Clicking
        $(window).click(function() {
            checkOffset();
        });
    });

这将有助于移动设备上的导航栏折叠。

- K_3

Answer 3

你应该能够做一些简单的事情，比如这样。

$('.navbar-collapse ul li a').click(function() {
     /* always close responsive nav after click */
     $('.navbar-toggle:visible').click();
});

这里是一个使用示例

这不是Java，而是JavaScript，你可以使用脚本标签轻松地将其添加到你的HTML页面中。

- Carol Skelly

---

我使用了下面答案中的代码，感谢帮助。 :D - Mountain Spring