在导航栏前的顶部显示引导横幅答案

【问题标题】：show bootstrap banner at the top before navbar在导航栏前的顶部显示引导横幅
【发布时间】：2017-06-13 16:26:36
【问题描述】：

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

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

但正如我告诉你的，它总是出现在导航栏之后，你能告诉我我必须做什么才能在顶部显示横幅吗？

【问题讨论】：

删除.navbar-fixed-top。当您向下滚动页面经过标题时将其添加回来。
如前所述， .navbar-fixed-top 将 nav 元素设置为 position: fixed ，使其在页面顶部具有固定位置，而与 HTML 标记顺序无关。您可以将导航嵌套在标题中并将标题设置为固定位置。
但是如果删除 .navbar-fixed-top 如果用户向下滚动导航栏消失并且我不希望横幅和导航栏被固定，只有导航栏
这就是为什么你需要动态地做它：stackoverflow.com/questions/26500923/…

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

这是一个有效的简化示例。在 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>

利用 jQuery，因为您使用的是 Bootstrap。当窗口一直滚动到顶部时，'fixed-top' 类将从导航栏元素中删除。在所有其他情况下，它将被添加到导航栏元素。

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

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

Check out the CodePen for a live example.

【讨论】：