Menu Fixed Scroll Top

Question

I made this code so that when I scrolled the page the MENU would be fixed at the Top. That is, always the user view.

var nav = $('#outermainmenu');
var lia = $('.sf-menu > li, .sf-menu > li > a');

$(window).scroll(function () {
    if ($(this).scrollTop() > 440) {
        nav.addClass("menu-fixed");
        lia.addClass("menu-fixed");
    } else {
        nav.removeClass("menu-fixed");
        lia.removeClass("menu-fixed");
    }
});

This code above works. But only when the height is greater than 440px, since it is the height of my slider. But I wish it wasn’t so. Because there are pages that my slider changes height.

I don’t want to keep checking in my script the slider height and defining a scrollTop.

Is there any way I can do this by checking if the menu is in TOP 0 ? The menu is after the 440px slider height.

---

Answer 1

I did. Always like this, when I put it, then I find the solution. The line that makes the difference is this: var num = $('#outermainmenu').offset().top;

Grab the Menu Top position. I check if the scrolling bump menu and apply my CSS.

var nav = $('#outermainmenu');
var lia = $('.sf-menu > li, .sf-menu > li > a');
var num = $('#outermainmenu').offset().top;

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > num) {
         lia.addClass('menu-fixed');
         nav.addClass('menu-fixed');
     }
     else {
         num = $('#outermainmenu').offset().top;
         lia.removeClass('menu-fixed');
         nav.removeClass('menu-fixed');
     }
});