将菜单永久固定在顶部（不会消失一秒钟）答案

【问题标题】：Affix menu on top permanently (without disappearing for a sec)将菜单永久固定在顶部（不会消失一秒钟）
【发布时间】：2016-02-24 01:55:22
【问题描述】：

我正在尝试将菜单导航栏固定在顶部，但不知何故，栏布局和“社交图标”和“搜索框”我都搞砸了。我尝试将第 7 行从相对位置更改为固定位置，但没有运气。基本上我现在拥有的是菜单在顶部，当您向下滚动时，菜单会消失一段时间，然后在向下滚动时再次弹出以保持固定在顶部。不知道为什么菜单在向下滚动返回时会消失一秒钟，但基本上现在我希望菜单导航栏永久固定在顶部，并且在向下滚动时不会消失一秒钟。当然，当前的布局/宽度和一切都保持机智。有没有可能以某种方式实现这一目标？

我的BOOTPLY::: BOOTPLY

/* CSS used here will be applied after bootstrap.css */

.menu-container {
    background-color:#000;
    border-bottom:4px dashed #FFBB3A;
    min-height:20px;
    position:relative;
}

 <header id="nav">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-static">
                        
                        <div class="clearfix menu-container">
                            <div class="pull-right clearfix toggle_btn_wrap">
                                <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
                            </div>
                            <div class="pull-left brand-name">
                                <h1>MENU</h1>
                            </div>
                            <div class="clearfix prevent-float"></div>
                            <div class="navbar-collapse collapse">
                                
                            </div>
                        </div>
                      <div class="clearfix search_and_social">
                            <div class="clearfix navbar navbar-custom-search">
                                search box
                            </div>
                            <div class="clearfix navbar navbar-custom-social">
                                social icons
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>

【问题讨论】：

您需要将position: fixed; 应用于嵌套较浅的元素，例如#nav。
@hungerstar - 我添加了我的测试站点，如果您慢慢向下滚动并查看菜单导航行为，您可以更好地看到问题。
菜单跳转是因为有一些javascript控制它的位置。不知道是插件还是什么。

标签： html css twitter-bootstrap-3

【解决方案1】：

看起来您正在使用Bootstrap Affix Plugin 并且没有正确配置它，或者它所做的事情与您的预期有些不同。 Affix 插件设置为在滚动一段距离或某个元素后触发 "sticky" 标题。

这将使您了解this Bootstrap example 中发生的情况。

解决方案

删除/禁用 Affix 插件。

将.navbar-fixed-top 添加到您的#nav 元素。然后将padding-top 添加到与您的#nav 元素高度相等的body 元素中，当前为181px。

【讨论】：