CODEWITHSUNDEEP
javascriptjquery
Jussi
Jussi

Reputation: 65

Internet Explorer javascript scroll function issue

My code is as follows:

var lastScrollTop = 0;
window.addEventListener("scroll", function(){ 
var st = window.pageYOffset || document.documentElement.scrollTop; 
if (st > lastScrollTop){
   $('.sticky').addClass('insight');
} else {
  $('.sticky').removeClass('insight');
}
lastScrollTop = st;
}, false);

Expected results appear in Chrome, FF, Edge: When the page is scrolled down, the class "insight" is added to elements with class "sticky" and it remains there until user scrolls upwards on the page.

In explorer, the "insight" is added as well on scroll down, but it's immediately removed when the downward scrolling motion stops. What could be causing this?

It's like Explorer has an extra scroll event when scrolling is complete?

Upvotes: 2

Views: 254

Answers (1)

Owais Aslam
Owais Aslam

Reputation: 1589

In Internet Explorer I didn't understand why on scroll down it is going to else condition as well.

I changed the condition for scroll up so it is working fine.

var lastScrollTop = 0;
 window.addEventListener("scroll", function(){
 var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
  $('.sticky').addClass('insight');
} else if (st < lastScrollTop) {
  $('.sticky').removeClass('insight');
}
lastScrollTop = st;
}, false);

Upvotes: 2

Related Questions