Menu Fixed Scroll Top

Question

Menu Fixed Scroll Top

Navigation

#1 by (1 votes)

1

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

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 were not so. Why have pages that my slider changes height.

I do not want to be checking in my script for the height of the slider and defining a scrollTop.

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

javascript html css

asked by anonymous 26.05.2015 / 00:29

1 answer

Repeat query with javascript Hover effect does not work

score 1 · Accepted Answer

I have resolved. Always so, when I post, then I find the solution. The line that makes the difference is this: var num = $('#outermainmenu').offset().top;

Take the position in Top of the Menu. I checked the scrolling on the menu and applied 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');
     }
});