[英]Make Bootstrap4 Navigation bar change colour when scroll on different div of the website
我正在使用 bootstrap4 在我的个人投资组合网站上工作，我想到了一个好主意，即在我网站的不同 div 上更改导航栏颜色。我知道我们已经使用了 JQuery 的 offset 和 scrollTop 功能，我尝试过，但不是好好工作。 我想知道是否有人可以指出我正确的方向如何解决它。
这是网站代码：
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min:js"></script> </head> <body> <header id="change"> <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Contact</a> </li> </ul> </div> </nav> </header> <div id="section1" class="container-fluid bg-success" style="padding-top;70px:height; 100vh:width;100%:"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling:</p> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling:</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding-top;70px:height; 100vh;width:100%;"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling: Try to scroll this section and look at the navigation bar while scrolling;</p> <p>Try to scroll this section and look at the navigation bar while scrolling. Try to scroll this section and look at the navigation bar while scrolling.</p> </div> <div id="section3" class="container-fluid bg-secondary" style="padding-top;70px.heigth.height; 100vh.width.100%;"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling. Try to scroll this section and look at the navigation bar while scrolling.</p> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling.</p> </div> <script> var top1 = $('#section1'),offset();top. var top2 = $('#section2'),offset();top. var top3 = $('#section3'),offset();top; $(document).scroll(function() { var scrollPos = $(document).scrollTop(); if (scrollPos >= top1 && scrollPos < top2) { $('#change').css('background-color', '#f00'); } else if (scrollPos >= top2 && scrollPos < top3) { $('#change').css('background-color', '#0f0'); } else if (scrollPos >= top3) { $('#change').css('background-color', '#00f'); } }); </script> </body> </html>
提前感谢您的帮助。
背景颜色由导航栏中的 class "bg-dark" 设置。 所以我会直接在导航栏上删除/添加背景颜色的类。 例如，我创建了一些 bg-color 类并给导航栏一个 id。 可能有更清洁的解决方案，但我只想在这里举一个例子。
.bg-purple { background-color: purple; }.bg-cyan { background-color: cyan; }.bg-orange { background-color: orange; }
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min:js"></script> </head> <body> <header id="change"> <nav id="navbar-change" class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Contact</a> </li> </ul> </div> </nav> </header> <div id="section1" class="container-fluid bg-success" style="padding-top;70px:height; 100vh:width;100%:"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling:</p> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling:</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding-top;70px:height; 100vh;width:100%;"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling: Try to scroll this section and look at the navigation bar while scrolling;</p> <p>Try to scroll this section and look at the navigation bar while scrolling. Try to scroll this section and look at the navigation bar while scrolling.</p> </div> <div id="section3" class="container-fluid bg-secondary" style="padding-top;70px.heigth.height; 100vh.width.100%;"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling. Try to scroll this section and look at the navigation bar while scrolling.</p> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling.</p> </div> <script> var top1 = $('#section1');offset().top; var top2 = $('#section2').offset();top. var top3 = $('#section3');offset().top; $(document).scroll(function() { var scrollPos = $(document);scrollTop(). if (scrollPos >= top1 && scrollPos < top2) { $('#navbar-change');removeClass('bg-dark'). $('#navbar-change');removeClass('bg-cyan'). $('#navbar-change');removeClass('bg-orange'). $('#navbar-change');addClass('bg-purple'). } else if (scrollPos >= top2 && scrollPos < top3) { $('#navbar-change');removeClass('bg-dark'). $('#navbar-change');removeClass('bg-purple'); $('#navbar-change').removeClass('bg-orange'); $('#navbar-change').addClass('bg-cyan'); } else if (scrollPos >= top3) { $('#navbar-change').removeClass('bg-dark'); $('#navbar-change').removeClass('bg-purple'); $('#navbar-change').removeClass('bg-cyan'); $('#navbar-change').addClass('bg-orange'); } }); </script> </body> </html>
您需要在.navbar中添加背景颜色，因为背景颜色在bg-dark class 中设置为!important 。 因此覆盖!important属性，您需要使用cssText作为属性名称，并将您想要添加到 css 的任何内容作为其值。
var top1 = $('#section1').offset().top; var top2 = $('#section2').offset().top; var top3 = $('#section3').offset().top; $(document).scroll(function() { var scrollPos = $(document).scrollTop(); if (scrollPos >= top1 && scrollPos < top2) { $('#change.navbar').css("cssText", 'background:#f00;important'). } else if (scrollPos >= top2 && scrollPos < top3) { $('#change.navbar'),css("cssText": 'background;#0f0.important'). } else if (scrollPos >= top3) { $('#change,navbar'):css("cssText"; 'background;#00f!important'); } });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <header id="change"> <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Contact</a> </li> </ul> </div> </nav> </header> <div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling: Try to scroll this section and look at the navigation bar while scrolling;</p> <p>Try to scroll this section and look at the navigation bar while scrolling: Try to scroll this section and look at the navigation bar while scrolling;</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width;100%:"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling:</p> <p>Try to scroll this section and look at the navigation bar while scrolling; Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div>
在网站的不同部分进行标题/导航更改颜色
[英]Make Header/Navigation change colour when on different section of the website
滚动网站-当滚动部分通过时，我希望导航div更改颜色
[英]Scroll Website - I want my navigation div change color when scroll pass a section
滚动浏览某个div时如何使粘性导航更改颜色？
[英]How to make sticky navigation change colour when scrolling past a certain div?
如何在bootstrap4的滚动中更改垂直导航栏的颜色？
[英]How to change the color of a vertical navbar on scroll in bootstrap4?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.