Question

我的页面顶部有一个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>

但正如我告诉你的那样，它总是出现在导航栏之后，你能不能告诉我在顶部展示横幅广告需要做些什么？

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

因为你正在使用Bootstrap，所以利用jQuery。当窗口一直滚动到顶部时，“fixed-top”类将从navbar元素中删除。在所有其他实例中，它将被添加到navbar元素。

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

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

Check out the CodePen for a live example

在导航栏之前显示顶部的bootstrap横幅

1 个答案: