Question

我现在设置导航栏的方式是当我滚动到顶部时，导航栏背景是透明的，当我开始向下滚动时，导航栏背景显示为黑色。我现在唯一的问题是当我处于移动尺寸并且我滚动到顶部时，当我点击导航栏切换下拉按钮时，下拉菜单中的背景是透明的，因为我一直向上滚动，但我想找到一种方法，当下拉菜单处于活动状态时，一直显示黑色背景，直到滚动到浏览器顶部。

HTML

<nav class="navbar navbar-default top-of-page">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="navLinks" class="nav navbar-nav">
        <li><a href="http://www.floridavisions.com">Home</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/stock">Stock Photography/ Footage</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Java脚本

<script>  $(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $('.navbar-default').addClass('top-of-page');
    } else {
        $('.navbar-default').removeClass('top-of-page');
    }
});
   </script>

CSS

.top-of-page {
        background-color: transparent;
    }
.navbar-default {
        background-color: black;
        background: rgba(0,0,0,.85);
        min-height: 90px;
        position: fixed;
        border-radius: 5px;
        border: none;
        width: 100%;
        z-index: 1; 
    } 
    #navLinks {
        padding-left: 20px;
    }
    #navLinks li {
        padding-top: 20px;
        padding-right: 10px;
    }
    #navLinks li a {
        color: white;
        font-size: 1.1em;
        font-weight: 700;
    }
    #navLinks li a:hover {
        color: #a6b1c4;
    }
    .navbar-brand img {
        height: 35px;
    }

Answer 1

写媒体查询。当设备宽度小于700px时，手机会给背景颜色...顶级课程。代码......

 @media only screen and (max-width: 500px) {
.top-of-page{
   background-color: #000;
}
}

切换按钮处于活动状态时如何显示导航栏背景

1 个答案: