讓 Bootstrap 4 固定導航欄向下滑動並在滾動時變為純色

Question

在我的 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>

Answer 1

我給了導航欄position: absolute ，當它滾動到它的高度時，我添加了一個 class ，它用 Z62F1C25ED1523096F 修復了它的 position 我給了 class 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>

Answer 2

正確的方法是使用 Intersection Observer，而不是滾動更資源友好：

const header = document.querySelector("header");

const topbar = document.querySelector(".top-bar");

const navObserverOptions = {
  threshold: 0.1
};

const navObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {

    if (!entry.isIntersecting) {

        document.getElementById("navbar").classList.add('fixed-navbar');

    } else {

        document.getElementById("navbar").classList.remove('fixed-navbar');

    }

  });
},
navObserverOptions);

navObserver.observe(topbar);