向下滚动导航栏固定顶部容器流体时的bootstrap导航栏容器

Question

我想问一下你们关于bootstrap导航栏容器的帮助，当它向下滚动固定在顶部的导航栏并同时容器流体

我还为您提供了代码链接链接，因此您可以使用Codepen div

Answer 1

在第3行添加容器 - 液体

<div class="container-fluid">

在第5行添加导航栏固定顶部

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">

codepen

请参阅文档，其中包含您的答案。 http://getbootstrap.com/components/#navbar

如果打扰你就学英语

Answer 2

所以，

如果我理解了您的问题，您希望在用户开始滚动后将导航栏固定到顶部。好吧，这是我对此的实现...我使用了这个答案https://stackoverflow.com/a/21301875并为此场景修改了它并记录了代码。

Codepen

/**
 * Scroll management
 */
$(document).ready(function () {

    // Define the menu we are working with
    var menu = $('.navbar.navbar-default.navbar-inverse');

    // Get the menus current offset
    var origOffsetY = menu.offset().top;

    /**
     * scroll
     * Perform our menu mod
     */
    function scroll() {

        // Check the menus offset. 
        if ($(window).scrollTop() >= origOffsetY) {

            //If it is indeed beyond the offset, affix it to the top.
            $(menu).addClass('navbar-fixed-top');

        } else {

            // Otherwise, un affix it.
            $(menu).removeClass('navbar-fixed-top');

        }
    }

    // Anytime the document is scrolled act on it
    document.onscroll = scroll;

});