Issue on IE adding class to a div via plain JavaScript on scrolling

Question

I'm using the following javascript to perform adding a "sticky" class to "features-menu" div after scrolling down on browser certain amount.

Through search a while ago, I came across this code from another user I believe from stackoverflow, but cannot find that post to reference it. But I was looking for an example that does not use jQuery.

The following works great in Firefox, Chrome, and MS Edge browser but on IE11, the class doesn't seem to get added to the div.

Can anyone kindly suggest a fix for IE without using jQuery? Thank you so much!

<script type = "text/javascript" >

myID = document.getElementById("features-menu");

var myScrollFunc = function() {

  var y = window.scrollY;

  if (y >= 400) {
    myID.className = "sticky"
  } else {
    myID.className = ""
  }
};

window.addEventListener("scroll", myScrollFunc);

</script>

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

If you look in the web console, you'll see an error telling you that addEventListener isn't a function on older IE. And unfortunately, IE11 will hobble itself if you've looked at it funny, going into (in)Compatibility Mode, and not have addEventListener (or any of several other modern features). For instance, if your page is on an internal network, by default IE will use Compatibility Mode and act like IE7 — and fail because IE7 didn't have addEventListener.

You can test for that and use attachEvent instead:

if (window.addEventListener) {
    window.addEventListener("scroll", myScrollFunc);
} else {
    window.attachEvent("onscroll", myScrollFunc);
}

(Note the "on".)

This kind of browser inconsistency, combined with the DOM being quite verbose and awkward, is why we have libraries like jQuery. :-) (Not saying you should use jQuery [or any other lib], just saying this kind of thing is a major reason they exist.)

Note that attachEvent and addEventListener are not exactly the same, but both hook up events and for what you've shown, they'll behave the same. For a more thorough handling of the differences, see the hookEvent function in this answer.

edited May 23 '17 at 11:52

Community

1
1

answered Oct 20 '15 at 18:41

T.J. Crowder

1,031,962
187
1,923
1,875

Thank you for your help. However, the issue is on IE11 rather than older version. I also tried using the snippet you listed above but still not working on IE. – A K Oct 20 '15 at 19:35
It's not a browser inconsistency. It's an IE only problem for not including it. Not worth using jQuery for two or three extra lines of javascript. Too often people call "browser inconsistencies" what are actually "IE-only" problems. – Rob Oct 20 '15 at 19:58
1

@Rob: If browser A does one thing and browser B does another, that's a browser inconsistency. Doesn't matter why. Remember that `attachEvent` came first; it was the W3C who decided not to use M$'s innovation and define different (and much more complex) semantics. (Don't get the wrong idea, I'm no fan of M$'s. IE7, at the very least, should have supported DOM2 events.) Sorry if you read the jQuery line as a recommendation; it wasn't. It was just an observation. – T.J. Crowder Oct 21 '15 at 02:15
@AK: IE11 will hobble itself if you've looked at it funny, see the updated first paragraph. But if you tried this and it didn't work, then it's not the problem, or not the **only** problem. It could be that [Shikkediel](http://stackoverflow.com/a/33247360/157247) is right, or that you need to do both the above *and* Shikkediel's change. (If it's both, please accept his/her answer with a comment saying it was both.) – T.J. Crowder Oct 21 '15 at 02:21

score 0 · Accepted Answer · answered Oct 20 '15 at 21:45

0

The problem is with window.scrollY which is undefined in IE. This is an alternative approach :

Demo

var y = window.scrollY || window.pageYOffset;

answered Oct 20 '15 at 21:45

Shikkediel

5,195
16
45
77

Thank you! That line change alone made it work! Also thank you T.J. Crowder for your insights. Much appreciated. – A K Oct 22 '15 at 12:24
Cheers for following up, some good info in that answer indeed - upvoted for the both of us. – Shikkediel Oct 22 '15 at 12:35

Issue on IE adding class to a div via plain JavaScript on scrolling

2 Answers2