javascript – Is there a way i can change the background of the navigation bar in html5 as the text flow up or as i scroll the text up?-ThrowExceptions

Exception or error:

I would like to the navbar to be be stay static, and change the background as the text in the flow up or get scrolled up.
Here is the code.

Here is the html and css code

enter image description here

How to solve:

/* Add a staythere class. It should be added to the navbar with JS when it reaches its scroll position */

.staythere {
position: fixed;
top: 0;
width: 100%;
}

Javascript :

window.onscroll = function() 
{
     myFunction() /* Function to add staythere Class */
     /* Code to Change Background Color. Use any condition if necessary */
     document.getElementsByTagName("BODY")[0].style.backgroundColor = 'red'; // Here red is an Example

 };

/* Get the navbar */
var navbar = document.getElementById("navbar");

/* Get the offset position of the navbar */
var fixedPos = navbar.offsetTop;

// Add the “staythere” class to the navbar when you reach its scroll position. Remove “staythere” when you leave the scroll position

function myFunction() {
if (window.pageYOffset >= fixedPos) {
navbar.addClass("staythere")
} else {
navbar.removeClass("staythere");
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *