Home/ Questions/Q 9188419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T20:00:07+00:00

I’m having an issue creating a sticky navigation on my site . I have

  • 0

I’m having an issue creating a sticky navigation on my site.
I have noticed that, when scrolling down the site, the transition of the navigation’s active state is slightly off. For example, when you scroll to the ‘roster’ section of the site, the navigation menu highlights ‘about’ until you scroll down slightly.

I assume this has something to do with my fixed header …? I am using the anchor scroll plugin. However I have applied a bit of Jquery for the sticky navigation.

         $(window).scroll(function () {
         if ($(window).scrollTop()>$("#contact").offset().top){  $("ul.nav-bar > li").removeClass("active")  $("#nav_5").parent().addClass("active") } else  if ($(window).scrollTop()>$("#client").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_4").parent().addClass("active") } else if ($(window).scrollTop()>$("#roster").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_3").parent().addClass("active") } else if ($(window).scrollTop()>$("#about").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_2").parent().addClass("active") } else if ($(window).scrollTop()>$("#home").offset().top ){ $("ul.nav-bar > li").removeClass("active") $("#nav_1").parent().addClass("active") } });  

Is there anything I need to apply to my js in order to fix this issue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems like you also have to take the height of #headerContainer into consideration.

    $(window).scroll(function() {
    if ($(window).scrollTop() > ($("#contact").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_5").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#client").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_4").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#roster").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_3").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#about").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_2").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#home").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_1").parent().addClass("active")
    }
});
    • 0