Question

我正在为我的项目使用bootstrap灰度主题，它有一个在滚动时折叠的导航栏，或者如果我转到同一页面上的链接（#download等）

问题是当我从其他页面转到锚点链接时，导航栏在我滚动之前不会崩溃。

我想解决方案是在java脚本中添加行，但我真的不知道要添加什么，因为我不知道java。： - （

// 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");
}
});

请帮忙。 :)： - *

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语句。

Answer 2

你应该能够做到这么简单的事情。

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

Here's an example of use

这不是Java，它是使用脚本标签轻松添加到html页面的JavaScript。

Answer 3

您也可以使用：

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

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

滚动时Bootstrap导航栏折叠

3 个答案: