Question

我正在尝试将菜单导航栏固定在顶部固定，但不知何故，酒吧布局和＆＃34;社交图标＆＃34;和＆＃34;搜索框＆＃34;我搞砸了。我尝试将7号线从相对位置改为固定位置，但没有运气。基本上我现在的菜单是在顶部，当你向下滚动时，菜单会消失一段时间然后再次弹出以便在向下滚动时保持在顶部。不知道为什么当向下滚动回来时菜单消失一秒钟，但基本上现在我希望菜单导航栏永久固定在顶部而不会在向下滚动时消失一秒。当然，目前的布局/宽度和所有要保持一致。是否有可能以某种方式实现这一目标？

我的BOOTPLY ::: BOOTPLY

＆＃13;

/* CSS used here will be applied after bootstrap.css */

.menu-container {
    background-color:#000;
    border-bottom:4px dashed #FFBB3A;
    min-height:20px;
    position:relative;
}

＆＃13;

 <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>

＆＃13;

Answer 1

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

这将为您提供this Bootstrap example中发生的事情。

<强>解决方案

删除/停用 Affix 插件。

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

永久贴上菜单（不会消失一秒）

1 个答案: