Today I will be sharing a quick tutorial on changing the color of your navigation bar upon scrolling down the page. This can be particularly useful when you want to have a transparent fixed navigation bar but don’t want it to collide with the text on your page. A simple Jquery script is used to create this neat effect.
Despite being an older technology, Jquery is still helpful for creating quick, lightweight scripts to perform a basic graphical change on HTML elements. It is a library based on Javascript and is designed so you can do more with less code. Jquery is good at HTML manipulation, CSS manipulation, HTML event methods, effects, and animations. One of the best things about Jquery is its cross-browser compatibility; it will run exactly the same on all major browsers!
Though vanilla JavaScript has its advantages, there is still a place for Jquery to handle simple tasks like changing the color of an element.
Setting up our project
We’re going to start with some basic HTML and a touch of CSS for styling.
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="wrapper">
<div class="text"
<p>
Put whatever you want in here as long as it is long enough to scroll down. This will be the content of your page.
</p>
</div>
</div>
<!--end wrapper-->
</body>Make sure your page content is long enough that you are able to scroll down, or there will be nothing for you to scroll. Once you have this done, the first step in getting our script to work is by linking to the Jquery CDN in the <head> of our file. To do that simply copy and paste the following script into your HTML files <head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>Once this is done, we start building our script. Jquery uses a $ sign to define/access Jquery, a selector to find HTML elements, and an action to be performed on those elements, like this:
$(selector).action()With that being said, we want to select our “Window” and trigger an action on “scroll” That will look like this:
$(window).scroll(function () {
We will put our function right here, between the curly braces
});The next step is going to be setting up the event that we want to happen on scroll. The event we are going to create is applying a couple of CSS classes to our navigation bar (in this case the ul element) once we scroll past 100px from the top of the window and automatically removing those classes again if we scroll back up above 100px from the top of the window. We are going to change the background from transparent to #461B93, a beautiful shade of purple. To do this we are going to create an “if/else” statement which will look like this:
if ($(window).scrollTop() >= 100) {
$('ul').css('background','#461B93');
} else {
$('ul').css('background','transparent');Simply put this function between the curly braces in your Jquery and you will be amazed at the results: your navigation bar now changes from transparent to purple and back again very quickly. The completed script should look like this:
$(window).scroll(function () {
if ($(window).scrollTop() >= 100) {
$('ul').css('background','#461B93');
} else {
$('ul').css('background','transparent');
}
});You may notice that the color change is sudden, and this may not be appealing. In my opinion, I like a smooth transition. To get this smooth transition, simply add the following CSS property to your UL selector in your style sheet:
transition: 0.4s;And there you have it!
Watch how on my Youtube channel
Do you learn better by watching videos instead of reading? Me too! That’s why I like to make an accompanying video for each one of my tutorials. You can check them out on my channel: Tyler Von Harz
Check out the video for this tutorial below, and please like and subscribe, or even just leave a comment on what you think.
