Creating a header which changes style on scrolling | From transparent to colored
- First of all add the requirements in the head of the html.
- Now let’s make a navbar using bootstrap.
- Give this nav a id of header. We will target this id.
- Then add a div that will provide the required room to see the scrolling action.
- Now add the following script.
<!DOCTYPE html> <html> <head> <title>Some Title</title> <!-- Code for number 1 start --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> <a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a> <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700" rel="stylesheet"> <!-- Code for number 1 ends --> </head> <body>
Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!