Question

引导程序的新手。

我想在NavBar中div内bootstrap下方显示背景图像。由于某些原因，以下代码中的图像未呈现正确的高度。如何在保持图像响应性的同时达到正确的高度？
此外，我们如何更改滚动时NavBar的颜色？滚动时，下面的代码没有任何反应。

HTML：

          <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">


        <div class="container">
          <a class="navbar-brand js-scroll-trigger" href="#page-top">  <img src="img/logo-clear.png" alt="logo" style="width:160px;"></a>
          <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#services">Services</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

  <!-- Header -->
  <div class="page-header bg-primary" style="background-image: url(./img/1.jpg);">
    <p class="text-center text-uppercase text-secondary mb-0" id="mainText">Portfolio</p>
  </div>
  </div>

CSS：

/*for navbar*/
.bg-secondary {
  background-color: transparent !important;
    /* background-color: transparent !important; */
}

.bg-secondary.scrolled{
   background-color: #333300 !important;
}

.page-header{
  background-size: cover;
  height: auto;
}

JS：

 <script>
  $(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > $('nav'));
  });
</script>

Answer 1

像这样？ https://jsfiddle.net/wwWaldi/nrysp61w/10/

您必须设置标题的高度，（我为演示更改了标题的网址）

height: 300px;

在导航栏下方的div中显示背景图像

1 个答案: