(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Don’t want to make from scratch? Buy the template instead 🙂
Auto Highlight Menu When it Reaches its Section – Elementor and GSAP Tutorial
In this tutorial, we will be making a floating bar that highlights the appropriate Menu when reaching its section. This floating bar also hides and shows when scrolling up and down. You can disable this effect if needed.
Floating Bar with Auto Highlight Menu – CSS, JS and GSAP Code
- dm-floating-nav-main is the CSS class of the main container that holds all menu items.
- dm-nav-menu is the CSS class of each container that contains your menu text. If you don’t plan on using containers for each menu item, you can simply give this CSS class to your each menu widget.
- dm-nav-container is the CSS class of sections that should trigger the highlight effect on the menu.
- To connect menu container with the right container, add the an extra CSS class to dm-nav-menu and use this same CSS class name in dm-nav-container ID. Example: “dm-nav-menu services” should be given to your menu item and then use “services” in CSS ID for the dm-nav-container that should be connected.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
/*Inactive/Default Menu*/
.dm-nav-menu {
width: 25%;
color:white;
transition: 0.5s ease-in-out;
background: transparent;
border-radius: 5px;
border: 1px solid #2C2C2C;
}
/*Hover Menu Effect*/
.dm-nav-menu:hover {
color:white;
}
/*Auto-highlight Menu Effect*/
.dm-nav-menu.active {
color: black !important;
background: white;
border: 1px solid white;
}
/*Floating Bar Container*/
.dm-floating-nav-main {
position: fixed;
bottom:10px;
left: 50%;
transform: translate(-50%,150%);
transition: none !important;
/*Blur glass filter*/
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
}
</style>
<script>
const dmNavContainers = document.querySelectorAll(".dm-nav-container");
const dmNavMenus = document.querySelectorAll(".dm-nav-menu");
window.onscroll = () => {
var current = "";
dmNavContainers.forEach((dmNavContainer) => {
const dmNavContainerTop = dmNavContainer.offsetTop;
if (pageYOffset >= dmNavContainerTop - 60) {
current = dmNavContainer.getAttribute("id"); }
});
dmNavMenus.forEach((dmNavMenu) => {
dmNavMenu.classList.remove("active");
if (dmNavMenu.classList.contains(current)) {
dmNavMenu.classList.add("active");
}
});
};
//Based on scroll-direction show/hidden floating background
let currentScroll2 = 0;
let isScrollingDown2 = true;
window.addEventListener("scroll", function(){
if (window.pageYOffset > currentScroll2) {
isScrollingDown2 = true;
gsap.to(".dm-floating-nav-main", {
y:'0%',
ease: "power1.out"
});
} else {
isScrollingDown2 = false;
gsap.to(".dm-floating-nav-main", {
y:'150%',
ease: "power1.out"
});
}
currentScroll2 = window.pageYOffset;
});
</script>
