让 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);