javascript - 让 Bootstrap 4 固定导航栏向下滑动并在滚动时变为纯色

在我 HTML/CSS 生活的大部分时间里，我一直在使用主题，而且它们之前大多都内置了这个，现在我要从头开始，我在尝试复制它时有点不知所措。

如您所见，我有一个非常酷的固定透明导航栏，它的工作原理与我想要的英雄图片完全一样，但是一旦我开始滚动，由于透明背景，它变得不可读。

我不仅想让它在滚动时不透明，而且我想让它像这个例子一样滑出:https://inspirothemes.com/polo/index.html - 我该怎么做呢？我想尽可能多地利用 Bootstrap 4.6。

.nav-item a {
    text-decoration: none;
    outline: none;
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
    font-size: .85em;
}

.nav-item a:hover {
    opacity: 0.5;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}


.hero {
    width: 100%;
    height: 90vh;
    background: url('https://www.fillmurray.com/800/600');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <nav class="navbar navbar-expand-sm fixed-top">
        <a class="navbar-brand ml-4" href="#">
            <img src="http://via.placeholder.com/50x30" alt="" width="50" height="30" class="d-inline-block align-top">
        </a>
        <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span> </span>
            <span> </span>
            <span> </span>
        </button>
        <div class="collapse navbar-collapse text-right" id="navbarsExample04">
            <ul class="navbar-nav ml-auto mr-4 text-uppercase">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Clients</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                
            </ul>

        </div>
    </nav>

    <main role="main">

        <section class="hero">
            <div class="container-fluid">

            </div>
        </section>


        <section class="main">

            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum luctus purus, quis ultrices ante porttitor a. Aenean nec eros neque. Etiam pretium dui in mollis placerat. Duis at imperdiet neque. Etiam bibendum, lacus sed lobortis condimentum, metus mi sagittis urna, sit amet consequat elit quam at quam. Morbi rutrum, est quis vehicula egestas, leo justo porta enim, id vestibulum enim nibh eu lectus. Proin commodo euismod justo quis porttitor. Aenean tincidunt sapien eget pharetra pulvinar. Donec cursus lacinia eros at placerat. Vivamus efficitur at urna sed bibendum. Nulla sapien massa, dictum quis rutrum bibendum, venenatis vel nibh. Nam gravida non elit euismod condimentum. Sed mattis convallis sagittis. Suspendisse pulvinar purus quis libero rhoncus, at fermentum neque pellentesque. Nunc consectetur quis magna in porta.</p><p>Etiam id elit tincidunt, suscipit leo eget, porta purus. Vestibulum dignissim elit ac vehicula tincidunt. Ut ullamcorper placerat diam sit amet molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper massa, eget vulputate risus. Nam elementum lacinia est, at lobortis quam feugiat ac. Cras ac sollicitudin massa, non vulputate risus. Curabitur vitae ex eget enim sagittis sollicitudin ut ac tellus. Fusce a metus ultricies ex ullamcorper auctor eu in quam. Nam vitae sollicitudin purus, quis vehicula neque. Aenean commodo consectetur tortor, quis rutrum risus aliquam ac. Nam ultricies vestibulum lorem at aliquam.</p><p>Etiam nec odio lobortis, varius orci sed, lacinia lacus. Suspendisse semper maximus leo sit amet finibus. Aliquam vitae sodales ex, sit amet tempor mi. Curabitur venenatis augue vitae enim fringilla, nec semper felis bibendum. Nam lacinia nulla quis sem egestas, vel tincidunt felis gravida. Suspendisse vel nunc non elit vestibulum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget mauris diam. Mauris rutrum tristique ex. Sed eleifend mi non tellus mollis, sit amet convallis urna condimentum. Donec diam erat, tincidunt quis aliquet vitae, convallis nec mauris. Curabitur condimentum neque non purus imperdiet egestas. Praesent vitae mattis turpis. Morbi porta eros eget lacus malesuada hendrerit. Quisque pellentesque, nulla ac faucibus efficitur, diam nisi pretium felis, nec vestibulum risus ex ut ligula.</p><p>Mauris et sollicitudin metus. Proin consectetur eleifend felis, id sollicitudin ligula. Aenean at libero tristique, vehicula lorem pharetra, pharetra dui. Mauris consectetur nec nulla in bibendum. Mauris vulputate commodo mauris. Ut in luctus purus. Duis consectetur leo ut enim efficitur efficitur. In hac habitasse platea dictumst. Sed rhoncus magna eget mi porta efficitur. Proin eget luctus turpis. Fusce tempor, sapien ut dictum malesuada, leo tortor sodales velit, ut fermentum metus dui in lacus. Duis consectetur ipsum a felis tempus congue. Nullam sodales dapibus semper. Ut pulvinar ultricies est, a ultrices leo lobortis eu. Duis ac leo laoreet, venenatis leo ut, posuere mauris. Vestibulum accumsan neque finibus, porttitor lectus eu, imperdiet dolor.</p><p>Suspendisse potenti. Quisque dapibus enim nec rutrum dignissim. Sed pellentesque neque consectetur, pharetra ex eu, eleifend ipsum. Ut cursus, urna et egestas imperdiet, magna nunc sollicitudin erat, vel facilisis tellus velit sit amet nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat risus id felis fermentum varius. Donec sit amet sapien sit amet nisl commodo posuere. Maecenas dolor odio, egestas sit amet metus at, condimentum venenatis tortor. Curabitur semper, tellus quis luctus mattis, augue eros fermentum erat, id malesuada odio nibh sit amet turpis. Praesent et ipsum ut erat varius varius. Nunc molestie rutrum libero, ut elementum metus varius gravida. Pellentesque eu egestas justo. Donec interdum ipsum a massa aliquet, sit amet fermentum nisi rhoncus.</p>

        </section>

    </main>

    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

最佳答案

我给了导航栏 position: absolute ，当它滚动到它的高度时，我添加了一个用动画固定它的位置的类。我给类 navbar transition: all .5s 来实现带有效果的菜单。

下面的代码实现了您期望的效果。

window.onscroll = function() {
  scrollFunction()
};
var first = true;

//function scrollFunction1() {
//  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
//    document.getElementById("navbar").classList.add('fixed-navbar');
//  } else {
//    document.getElementById("navbar").classList.remove('fixed-navbar');
//  }
//}

function scrollFunction() {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    document.getElementById("navbar").classList.add('fixed-navbar');
  } else if (document.body.scrollTop == 0 && document.documentElement.scrollTop == 0) {
    document.getElementById("navbar").classList.remove('fixed-navbar');
  }
}

.nav-item a {
  text-decoration: none;
  outline: none;
  color: #ffffff;
  opacity: 1;
  font-weight: 600;
  font-size: .85em;
}

.nav-item a:hover {
  opacity: 0.5;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}

.hero {
  width: 100%;
  height: 90vh;
  background: url('https://www.fillmurray.com/800/600');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.navbar {
  position: absolute !important;
  width: 100%;
  transition: all .5s;
}

.fixed-navbar {
  background: white;
  top: 0;
  position: fixed !important;
  animation-name: fixedAnim;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-box-shadow: -1px 6px 13px 0px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: -1px 6px 13px 0px rgba(0, 0, 0, 0.44);
  box-shadow: -1px 6px 13px 0px rgba(0, 0, 0, 0.44);
}

.fixed-navbar a {
  color: #000;
}

@keyframes fixedAnim {
  from {
    top: -50px;
  }
  to {
    top: 0;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<nav id="navbar" class="navbar navbar-expand-sm">
  <a class="navbar-brand ml-4" href="#">
    <img src="http://via.placeholder.com/50x30" alt="" width="50" height="30" class="d-inline-block align-top">
  </a>
  <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span> </span>
            <span> </span>
            <span> </span>
        </button>
  <div class="collapse navbar-collapse text-right" id="navbarsExample04">
    <ul class="navbar-nav ml-auto mr-4 text-uppercase">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Clients</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Contact</a>
      </li>

    </ul>

  </div>
</nav>

<main role="main">

  <section class="hero">
    <div class="container-fluid">

    </div>
  </section>


  <section class="main">

    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum luctus purus, quis ultrices ante porttitor a. Aenean nec eros neque. Etiam pretium dui in mollis placerat. Duis at imperdiet neque. Etiam bibendum, lacus sed lobortis condimentum,
      metus mi sagittis urna, sit amet consequat elit quam at quam. Morbi rutrum, est quis vehicula egestas, leo justo porta enim, id vestibulum enim nibh eu lectus. Proin commodo euismod justo quis porttitor. Aenean tincidunt sapien eget pharetra pulvinar.
      Donec cursus lacinia eros at placerat. Vivamus efficitur at urna sed bibendum. Nulla sapien massa, dictum quis rutrum bibendum, venenatis vel nibh. Nam gravida non elit euismod condimentum. Sed mattis convallis sagittis. Suspendisse pulvinar purus
      quis libero rhoncus, at fermentum neque pellentesque. Nunc consectetur quis magna in porta.</p>
    <p>Etiam id elit tincidunt, suscipit leo eget, porta purus. Vestibulum dignissim elit ac vehicula tincidunt. Ut ullamcorper placerat diam sit amet molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper massa, eget vulputate
      risus. Nam elementum lacinia est, at lobortis quam feugiat ac. Cras ac sollicitudin massa, non vulputate risus. Curabitur vitae ex eget enim sagittis sollicitudin ut ac tellus. Fusce a metus ultricies ex ullamcorper auctor eu in quam. Nam vitae
      sollicitudin purus, quis vehicula neque. Aenean commodo consectetur tortor, quis rutrum risus aliquam ac. Nam ultricies vestibulum lorem at aliquam.</p>
    <p>Etiam nec odio lobortis, varius orci sed, lacinia lacus. Suspendisse semper maximus leo sit amet finibus. Aliquam vitae sodales ex, sit amet tempor mi. Curabitur venenatis augue vitae enim fringilla, nec semper felis bibendum. Nam lacinia nulla quis
      sem egestas, vel tincidunt felis gravida. Suspendisse vel nunc non elit vestibulum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget mauris diam. Mauris rutrum tristique ex. Sed
      eleifend mi non tellus mollis, sit amet convallis urna condimentum. Donec diam erat, tincidunt quis aliquet vitae, convallis nec mauris. Curabitur condimentum neque non purus imperdiet egestas. Praesent vitae mattis turpis. Morbi porta eros eget
      lacus malesuada hendrerit. Quisque pellentesque, nulla ac faucibus efficitur, diam nisi pretium felis, nec vestibulum risus ex ut ligula.</p>
    <p>Mauris et sollicitudin metus. Proin consectetur eleifend felis, id sollicitudin ligula. Aenean at libero tristique, vehicula lorem pharetra, pharetra dui. Mauris consectetur nec nulla in bibendum. Mauris vulputate commodo mauris. Ut in luctus purus.
      Duis consectetur leo ut enim efficitur efficitur. In hac habitasse platea dictumst. Sed rhoncus magna eget mi porta efficitur. Proin eget luctus turpis. Fusce tempor, sapien ut dictum malesuada, leo tortor sodales velit, ut fermentum metus dui in
      lacus. Duis consectetur ipsum a felis tempus congue. Nullam sodales dapibus semper. Ut pulvinar ultricies est, a ultrices leo lobortis eu. Duis ac leo laoreet, venenatis leo ut, posuere mauris. Vestibulum accumsan neque finibus, porttitor lectus
      eu, imperdiet dolor.</p>
    <p>Suspendisse potenti. Quisque dapibus enim nec rutrum dignissim. Sed pellentesque neque consectetur, pharetra ex eu, eleifend ipsum. Ut cursus, urna et egestas imperdiet, magna nunc sollicitudin erat, vel facilisis tellus velit sit amet nulla. Class
      aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat risus id felis fermentum varius. Donec sit amet sapien sit amet nisl commodo posuere. Maecenas dolor odio, egestas sit amet metus at, condimentum venenatis
      tortor. Curabitur semper, tellus quis luctus mattis, augue eros fermentum erat, id malesuada odio nibh sit amet turpis. Praesent et ipsum ut erat varius varius. Nunc molestie rutrum libero, ut elementum metus varius gravida. Pellentesque eu egestas
      justo. Donec interdum ipsum a massa aliquet, sit amet fermentum nisi rhoncus.</p>

  </section>

</main>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

关于javascript - 让 Bootstrap 4 固定导航栏向下滑动并在滚动时变为纯色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66404765/

javascript - 让 Bootstrap 4 固定导航栏向下滑动并在滚动时变为纯色

上一篇：reactjs - 在 Monaco Editor 中使用热键？

下一篇：batch-file - 是否可以在 cmd 中使用操纵杆/游戏 Controller 输入？