This time tutorial-webdesign.com will try to make a menu whose position is always on top (fixed) after the web page is scrolled, not just above, the menu that was previously integrated with this website page will change color as well. The point here we will learn how to remove and add classes to the html tag when the menu is scrolled with the help of jquery.
Slightly different from what we made earlier in the tutorial Creating a Fixed Position and Responsive Menu where we don’t need javascript for that, because we put the menu directly at the top of the website page with CSS.

To change the shape of the menu like that, of course we need Javascript to get the event when the mouse is scrolled, this time we use Jquery to practice deleting and then adding a class with another name when the website is scrolled.

Okay, let’s just make the HTML structure, here we try to use HTML5 tags for practice.

HTML Structure

The code above is our HTML structure in brief, the details will be described below each of the contents of each section.
header
The header section is generally filled with the title and description of the website (tagline).

Navigation
In this section is our menu, it’s simple, it’s just a div in which there is a menu list (ul > li)

Note that there is the class name of the div, which is named normal. This is useful for giving the main style before scrolling.

Section / Website content
This section contains the contents of the website that we created, there are several sections and we give each section according to the ID of each menu (about, services, portfolio and contact)

CSS styles
After we are done with the HTML structure that will be created, it’s time for us to start beautifying the appearance by using CSS, there is no special css that we need because this is only for demo purposes.

Initial CSS
this is used for global or whole, actually it is not complete, usually for global we need to normalize, css reset or something else to make it better, but this is only for demo.

/* Global

That’s how the css sequence we make. Continue with Javascript

Javascript
To be able to change the .normal class to .fixed, so that the menu display changes we need Javascript, here we have previously inserted Jquery of course in the head and /head sections.
Then we create a javascript file with the name twd-menu.js with the contents as below.

It can be seen there that we will first delete the normal class, then add the fixed class, so when the normal class is deleted of course the style we wrote in the css for the .normal class is no longer useful, what is used is the css code for the .fixed class, where the contents are position: fixed to make the position unchanged and width:100% to fill the width of the monitor screen.

Results
Here is the result that has been created, you can view and download the code from Github.

Please note this is only for demo purposes, so we don’t embellish all parts with CSS.