1

So I have the following CSS on HTML and BODY elements

 html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

it's important to keep this CSS to avoid fixed positioned elements from jittering on ie 9 and above

So basically the element is a scrollable element and window.scrollTop() returns 0 regardless of where I scroll on the page so I've implemented this JS just for ie/edge browser clients

$('body').scroll(function(){

        var wrapHeight = element_to_stick_to_header.outerHeight();

        //The following condition is never true because $('body').scrollTop()
        // always returns 0 on ME

        if($('body').scrollTop() + headerHeight > orginalOffset  &&  window.innerWidth > 768){

             // do something 
        }
        else {
             // do something else
        }
});

This function works perfectly on ie9 and above but on Microsoft Edge it doesn't

I have tried the following so far to tackle this issue and none of the bellow seems to work:

var top = (document.documentElement && document.documentElement.scrollTop) || 
          document.body.scrollTop;

from: This overflow question

document.documentElement.scrollTop

from this overflow question

and

var scrollTop = $(document).scrollTop();

from this overflow question

Community
  • 1
  • 1
nedo
  • 128
  • 2
  • 7

0 Answers0