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
and
var scrollTop = $(document).scrollTop();