css - 如何在向下滚动时消失的 Bootstrap 固定导航栏上方放置横幅？

Question

我目前正在为学校做一个 ASP.NET MVC 网站的元素。当我创建一个新元素时， Bootstrap 文件会自动添加。所以我决定使用它，但我以前从未这样做过。

我首先注意到的是网站顶部的固定导航栏。我想要一个标题/横幅在它上面，然后是导航栏。但我没能做到。我在布局 View 中有以下代码:

<div class="movdb-header"></div> <!-- this is the header i want to display above navbar -->

<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Home", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
        @Html.ActionLink("Inloggen", "Index", "User", new {area = ""}, new {@class = "navbar-brand"})
        @Html.ActionLink("Uitloggen", "Index", "Logout", new {area = ""}, new {@class = "navbar-brand"})
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        </ul>
    </div>
</div>

CSS:

.movdb-header {
background-color: red;
height: 110px;
width: 100%;

我早些时候搜索过这个问题，人们谈到删除 navbar-fixed-top 类，然后将你的 div 放在它上面。但我希望导航栏保持固定但位于个人横幅下方，如果向下滚动，则只有导航栏在顶部可见。因此，向下滚动时横幅会消失。

我该如何解决这个问题？

提前致谢。

Answer 1

你可以给你的 .movdb-header 固定位置，并给你的导航栏 top: 110px 位置。它现在设置在顶部:0。

编辑:

.navbar {
 position: relative;
 }

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100){
            $('.navbar').css('position','fixed');
        }
        else{
            $('.navbar').css('position','relative');
        }
    });
});