引导程序导航栏在滚动时折叠

Bootstrap navbar collapse on scroll

本文关键字：折叠 滚动 导航 引导程序      更新时间：2023-09-26

我的项目使用引导程序灰度主题，它有一个滚动时折叠的导航栏，或者如果我转到同一页面上的链接（#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");
}
});

请帮忙。：）：-*

您需要在加载页面和滚动窗口时运行检查，通过将检查页面偏移量的逻辑放入函数中，并从文档就绪和窗口滚动中运行，您可以在不复制任何代码的情况下执行检查。

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

您也可以使用：

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

这将有助于移动设备上的导航栏崩溃。

您应该能够做这样简单的事情。。

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

这里有一个使用的例子

这不是Java，而是JavaScript，它可以使用脚本标记轻松地添加到html页面中。

相关文章：