Jquery scroll() IE compatibility

Question

Hey, guys, what’s up? Guys, I have a little problem, I have a Jquery scroll() event, only I have a compatibility problem with Microsoft Edge (IE), follow the code:

$(window).scroll(function(){
    var scrollTop = $('html, body').scrollTop();

    if(scrollTop >= 40){
        $('.header-menu').css('position', 'fixed');
        $('.header-menu').css('top', '0');
        $('.header-menu').css('left', '0');
        $('.header-menu').css('right', '0');
    }else if(scrollTop <= 40){
        $('.header-menu').css('position', 'relative');      
    }

    if(scrollTop >= 380){
        $('.sub-menu').css('position', 'fixed');
        $('.sub-menu').css('top', '140px');
        $('.sub-menu').css('right', '40px');
    }else if(scrollTop <= 500){
        $('.sub-menu').css('position', 'absolute');
        $('.sub-menu').css('top', '0');
    }

});

OBS: I also tested in that browser similar to Chrome, -Chromium- and it also didn’t work... I also changed the window for Document and Nn worked

Answer 1

The $('html, body').scrollTop(); will only get the value of the first one you find, as every page generates the html and body tags (content or not in the HTML source), it will always fetch the scrollTop html

And since in IE probably scroll is not in the same element as it is in Firefox and Chrome then should use the global window., thus:

 $(window).scrollTop();

Probably this way it solves and even simplifies (and will be "a little faster", since you will not need to call several times the $(...)):

var $w = $(window);

$w.scroll(function(){
    var scrollTop = $w.scrollTop();
    var headermenu = $('.header-menu');
    var submenu = $('.sub-menu');

    if(scrollTop >= 40){
        headermenu.css({
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0'
        });
    }else if(scrollTop <= 40){
        headermenu.css('position', 'relative');      
    }

    if(scrollTop >= 380){
        submenu.css({
            'position': 'fixed',
            'top': '140px',
            'right': '40px'
        });
    }else if(scrollTop <= 500){
        submenu.css({
            'position': 'absolute',
            'top': '0'
        });
    }

});