Pab*_*bar 1 css twitter-bootstrap bootstrap-4
我的页面顶部确实有一个引导导航栏，这意味着导航栏上方没有任何内容，但现在我想在导航栏上方添加一个横幅，一旦用户向下滚动，导航栏就会固定在顶部（这不是问题，因为这是实际行为）但我无法在顶部获得横幅，它总是出现在导航栏之后，这是导航栏的代码
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Texto", "Index", new { controller = "Home" }, new { @class = "navbar-brand" })
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left">
<li id="services">
@Html.ActionLink("Tipo de Evento", "TipoEvento", "Home")
</li>
<li id="other" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Ayuda<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="@Url.Action("RecuperarClave", "Login")"><span class="glyphicon glyphicon-check"></span> Recuperar Contraseña</a></li>
<li><a href="@Url.Action("Index", "Contact")"><span class="glyphicon glyphicon-check"></span> Contactenos</a></li>
<li><a href="@Url.Action("Ayuda", "Home")"><span class="glyphicon glyphicon-check"></span> Manual de usuario</a></li>
</ul>
</li>
这是我试图在导航栏之前定位的横幅代码
<body>
<header class="masthead">
<div class="container">
<a class="main-logo pull-left" href="#">Ribbit</a>
</div>
</header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
但正如我告诉你的，它总是出现在导航栏之后，你能告诉我我必须做什么才能在顶部显示横幅吗？
这是一个有效的简化示例。在 Bootstrap 导航栏上方创建了一个带有 className 横幅的 div。默认情况下，导航栏没有“固定顶部”类。
<div class="banner">
<h1>Sample Banner</h1>
</div>
<nav class="navbar navbar-light bg-faded" id="navbar">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
由于您使用的是 Bootstrap，因此请充分利用 jQuery。当窗口一直滚动到顶部时，'fixed-top' 类将从导航栏元素中删除。在所有其他情况下，它将被添加到导航栏元素。
$(window).scroll(function(){
if ($(window).scrollTop() == 0) {
$(".navbar").removeClass("fixed-top");
} else {
$(".navbar").addClass("fixed-top");
}
});
现在，当您向下滚动时，导航栏会固定在顶部。当您回到顶部时，它会回到主横幅下方。