gpt4 book ai didi

css - 在导航栏之前的顶部显示 Bootstrap 横幅

转载 作者:太空宇宙 更新时间:2023-11-03 22:39:49 26 4
gpt4 key购买 nike

我的页面顶部确实有一个 Bootstrap 导航栏,这意味着导航栏上方没有任何内容,但现在我想在导航栏上方添加一个横幅,一旦用户向下滚动,导航栏就会固定在顶部(这不是问题,因为这是实际行为)但我无法在顶部获得横幅,它总是出现在导航栏之后,这是导航栏的代码

<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。当窗口一直滚动到顶部时,“固定顶部”类将从导航栏元素中删除。在所有其他情况下,它将被添加到导航栏元素。

$(window).scroll(function(){
if ($(window).scrollTop() == 0) {
$(".navbar").removeClass("fixed-top");
} else {
$(".navbar").addClass("fixed-top");
}
});

现在,当您向下滚动时,导航栏会固定在顶部。当您回到顶部时,它会回到主横幅下方。

Check out the CodePen for a live example .

关于css - 在导航栏之前的顶部显示 Bootstrap 横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44526926/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com