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

【问题标题】：bootstrap navbar container when scroll down navbar fixed top container fluid向下滚动导航栏固定顶部容器流体时引导导航栏容器
【发布时间】：2018-01-12 08:19:41
【问题描述】：

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

我还为您提供了 codepen 链接，以便您玩 Codepen div

【问题讨论】：

是的，这很重要，如果他们不理解您的问题，他们将如何帮助您？
原始操作的问题是使用糟糕的英语显然有些人可以破译它，显然这个问题与How to Bootstrap navbar static to fixed on scroll? 相同

标签： twitter-bootstrap containers navbar affix

【解决方案1】：

所以，

如果我理解您的问题，您希望在用户开始滚动后将导航栏附加到顶部。好吧，这是我对此的实现......我使用了这个答案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;

});

【讨论】：

谢谢先生，我还能在导航栏中使用 css 过渡吗？

【解决方案2】：

在第 3 行添加容器流体

<div class="container-fluid">

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

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

codepen

查看文档；你的答案在那里。 http://getbootstrap.com/components/#navbar

【讨论】：

Please consider adding a comment if you think this post can be improved. idk 为什么它拒绝原始操作的问题本身使用令人困惑的英语，当然我不会发布这个并回答如果操作使用像one 这样可以理解的英语提问。您可以自行检查我回答的日期、问题编辑的日期及其历史记录以及接受的答案日期。