Top fixed menu bar on scroll with css & năm 2024
|
The process worked, but it had it own glitches, specially performance issues — it is never a good idea to listen for an onscroll event. For tiny cases you may get away, for more complex cases the application will start stuttering. Show
But now things have changed in modern browsers. You can create a sticky element using just CSS ! DemoClick here to see demo Download codes for the demo Switching Between Relative & Fixed Positioning with position: stickyposition: sticky comes between position: relative and position: fixed. It behaves like a relatively positioned element within its parent, but when it crosses a specified threshold in the viewport (screen), it becomes "stuck" to the screen and becomes a fixed element. Consider the following CSS : When the distance of the element is more than 15px from the top of the screen, it will behave like a normal element. During scrolling when the distance becomes 15px (or less) from the top, it becomes fixed. Furthermore during scrolling when distance becomes more than 15px, it becomes a normal element once again. CSS to Make an Element StickyFor the following HTML : The CSS for nav-container would be :That's it. No more code required to make an element fixed on scrolling ! Gotchas to Prevent in Sticky PositionDon't place the navbar within a parent container, which would later get hidden when scrolled past it. For example the below markup won't work : It is because the navbar (which is a child of the outer container) would be visible only when the parent is visible. Once the user scrolls beyond the outer container, it gets hidden and the child gets hidden too. As we discussed earlier, we need to know HTML, CSS, and JavaScript to create a sticky navbar. Therefore, these are the prerequisites to creating a sticky navbar. What is a Sticky Navbar?A sticky navbar CSS is a navigation bar that helps you to access different sections or parts of a website while maintaining its position regardless of scrolling on the webpage. This property of sticky navbar CSS is retained inside the boundaries of its parent element. A sticky element behaves as a relatively located element once the window approaches the limit of the parent. A sticky navbar CSS makes the webpage more attractive and responsive to user interaction. It is one of the most essential parts of a webpage. Difference between Fixed & StickyFixed and sticky represent the positioning of an element on the webpage, i.e. the navbar in this case. Both sticky and fixed are almost identical, other than a few differences. Let’s see them in detail. Fixed: In this property, despite scrolling, components remain in the same place on the screen. So they appear to "float" above the information as you navigate down the page. Sticky: It is similar to Fixed, i.e., in this property, despite scrolling, components remain in the same place on the screen but only inside the boundaries of their parent element. A sticky element behaves as a relatively located element once the window approaches the limit of the parent. This is the main difference between the fixed and sticky properties of webpage elements. STEP 1 - Add HTMLTo create a sticky navbar, we need to create its structure. To create the structure, we will use HTML. Therefore, let's start by creating the navbar structure in HTML. Code:Explanation:In the above code, we create a division tag to represent the navbar. It has 3 links that point to different parts or web pages of a website. These links are represented using Anchor Tags (). The links to these sections are declared in the href attribute of the tag. In this way, we can create the structure of Navbar. Step 2 - Add CSSIn the second step, after creating the structure of the web page, we will make the website more interactive and attractive by using CSS. Code:Explanation:This is the CSS to make the page more attractive. Firstly, we write the CSS for the navigation bar in which we define its background colour and the overflow property. After that, we define CSS for the Anchor Tag, i.e., present in the NavBar, in which we define properties like color, alignment, padding, etc., and in the third section, we make a Sticky class that will make our navbar sticky when added dynamically through JavaScript. This sticky class contains attributes like position, width, and top. Step 3 - Add JavaScriptIn the third step, after completing HTML and CSS, we are going to code JavaScript to make the website more interactive and responsive. We will use JavaScript to add a sticky class to the navbar during scrolling. Code:ExplanationIn the above JavaScript code, we first select the navbar using the query selector function. Then we find the top of the navbar. Then we will write a function, i.e., sticky navbar, that would add the sticky class we created in CSS when the scroll goes beyond the navbar height, which is handled with the help of an event listener. Creating a Sticky Navbar with JS - Initial PositioningAs we discussed earlier, to create a sticky navbar, we need to add the sticky class created by us in the CSS section. A navbar basically has 2 phenomena, i.e., the initial positioning of the navbar and the change that occurred in it after adding Sticky navbar functionality. Let's discuss them. The initial positioning of Navbar is the basic state of Navbar, i.e., without the addition of the Sticky Class. It is usually present on the top of the webpage and acts as a fixed Navbar while scrolling on the web page to a particular Instant. Creating a Sticky Navbar with JS - the Sticky EffectThe Sticky Effect is the phenomenon that occurs when the user scrolls above the top of the parent element in which the sticky class is added to the navbar. through JavaScript, which makes the web page more attractive, responsive, and interactive. Adding the sticky class to the navbarThe Sticky class is the one that transitions a normal navbar into a sticky navbar. To add the sticky class to the navbar, we must first perform the following steps:
These 3 steps together transition a normal or fixed navbar into a sticky navbar. Highlight Active Navbar SectionsThis is one of the best features of a webpage, which makes the website more interactive and responsive to user interaction. In this, we highlight the sections of the navbar in which the user hovers or wishes to visit to increase user interaction. We can add this functionality using hover pseudo-class. Let's see the code to understand it better. Code:Explanation:In the above code, we create a CSS element that will work when a hovering action is performed by the user on the anchor tag. I.e., when the user performs a hovering action on the anchor tag or the links of the navbar, it will turn its background into white and the text color to black to highlight the tag or link on the navbar. Get the Links in the Sticky NavbarIn a sticky navbar, in order to visit different sections of the same website or on different web pages, we need to add links to different tags in the navbar. We can do this by adding a link to the webpage or a CSS selector in the Code:Explanation:In the above code, we can clearly see that the Throttling the Event ListenerIn the Java Script Section of the code, we need to create a sticky function that will be added to the Class List of the Navbar when the scrolling crosses the top of the parent element of the Navbar. This functionality is added in the navbar using the Event Listener when the "scroll" operation takes place. Let's see its code for better understanding. How to fix navbar at top using CSS?Add CSS. Set the overflow property of the "navbar" class to "hidden" and the position to "fixed". ... . Style the tags. ... . Give color to the :hover pseudo-class so as when you hover the text the color changes.. Style the "container" class with the padding, margin-top, and height properties.. How do you make the menu stay on top in CSS?To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu. How do I make the header stay at the top in CSS?To get the header to stay in place when scrolling, you can use CSS position: fixed; property on the header element. This will allow the header to stay at the top of the page, even when the user scrolls up or down the page. |
