相关疑难解决方法(0)

我使用一个名为custom.css的辅助文件来覆盖引导程序代码,我想知道如何创建一个仅在我的网站访问者不在页面顶部时激活的代码.

到目前为止,我使用bootstrap提供的默认代码创建了一个透明的导航栏.我唯一要做的就是将其设置为执行:background-color: #color当访问者向下滚动时.

示例:https://www.lyft.com/

当我在页面顶部时,导航栏是透明的,但当我向下滚动时,它变得不透明.

我看到一个透明的主题导航栏,在向下滚动时效果非常好.

这是向下滚动时发生的事情.

1. 它从0不透明度变为100
2. Navbar固定容器的高度变得更小.
3. 颜色:#FFF; 变成颜色:000;

这是该主题演示页面的直接链接

猜测它是javascript/jquery在那里使用,我只知道HTML和CSS.谁能帮助我让它像那个主题一样？

我已经搜索了整堆,但似乎无法找到一个有效的解决方案.基本上我的NavBar完全是我想要的.我现在想要缩小NavBar,当我的页面向下滚动时,使用漂亮的平滑过渡(动画)使其变得更加纤细.

这是我当前NavBar的HTML标记:

<header>


      <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website Branding"></a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Portfolio</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Blog</a>
                  </li>
              </ul>
          </div>
      </nav>


    </header>

我有什么想法可以达到这个目的吗？我做了很多搜索,但大多数解决方案都是针对Bootstrap …