Jquery scroll () IE Compatibility

Question

Jquery scroll () IE Compatibility

Navigation

#1 by (1 votes)

0

What about people, all right? I have a JQuery scroll () event, but I'm having 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');
    }

});

NOTE: I have also tried that browser similar to Chrome, -Chromium- and it also did not work ... I already changed the window by document and Nn worked

jquery internet-explorer microsoft-edge

asked by anonymous 31.07.2018 / 20:13

1 answer

Is it possible to perform a filter through a calculated column? Store multiple values in the same database column, how far is it worth it?

score 1 · Accepted Answer

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

And as IE probably the scroll is not in the same element as it is in Firefox and Chrome, you should use the global window. , like this:

 $(window).scrollTop();

It probably solves and even simplifies (and will be "a little faster", since you do not have to call $(...) ):

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'
        });
    }

});