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

Question

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

我还为你提供了codepenlink所以你可以玩Codependiv

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

所以，

如果我理解你的问题，你想在用户开始滚动后将导航栏附加到顶部。好吧，这是我对此的实现...我使用了这个答案并针对这种情况对其进行了修改，并记录了代码。

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;

});

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

bootstrap navbar container when scroll down navbar fixed top container fluid

twitter-bootstrap

containers

navbar

affix