I'm struggling to grasp the concept of scrollspy and how it functions. Despite reviewing numerous examples, I remain perplexed, which is why I've come here for help. My understanding is that scrollspy monitors scrolling behavior and triggers certain actions when hitting specific IDs. In the snippet below, it seems to be highlighting a particular link on the navigation bar. However, I can't locate the code responsible for making these changes. There doesn't seem to be any HTML or CSS specifying the color change of the links in the nav bar. Suppose I wanted to alter the text color of the links to blue upon scrolling to that section of the page – what adjustments would I need to make? The code provided is from the bootstrap section of w3 school's resources that I have been experimenting with. Apologies if my formatting is off, and thank you in advance for your assistance. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
<!DOCTYPE html>
<html>
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
<p>Try to scroll this section and check the navigation bar as you scroll! Try to scroll this section and keep an eye on the navigation bar’s behavior while scrolling.</p>
</div>
</body>
</html>