使两个类似的javascript函数协同工作

Question

I started with Javascript recently. I found a piece of code which changes the class of an object on scroll using pure javascript. Here is that code -

window.onscroll = function() {
  if (window.scrollY > 1) {
    document.getElementById('nav2').className = "after";
  } else {
      document.getElementById('nav2').className = "before";
  }};
window.onscroll = function() {
  if (window.scrollY > 1) {
    document.getElementById('list').className = "ul2";
  } else {
      document.getElementById('list').className = "ul";
  }};

The problem is that in this code only the second function runs , the first one does not run until i remove the second function. Please suggest any pure javascript method to solve this issue

Answer 1

Problem is because when you are saying second time window.onscroll=somefun it's overwriting the existing one. So now only it will call the second function onscroll .

Just write every thing in one function like bellow

window.onscroll = function() {
  if (window.scrollY > 1) {
    document.getElementById('nav2').className = "after";
    document.getElementById('list').className = "ul2";
  } else {
      document.getElementById('nav2').className = "before";
      document.getElementById('list').className = "ul";
  }};

Answer 2

If you assign it like this ( window.onscroll = ... ) then you can only ever have one function in there (the next would overwrite the first).

The better way would be to add an event listener .

in your case that might be

window.addEventListener('scroll', function (event) {
    //...
}, true);

Answer 3

  window.onscroll = function() {
  if (window.scrollY > 1) {
    document.getElementById('nav2').className = "after";
    document.getElementById('list').className = "ul2";
  } else {
      document.getElementById('nav2').className = "before";
      document.getElementById('list').className = "ul";
  }};

U can use code like this..

Answer 4

The better solution for this addEventListener() - MDN , don't assign event listeners to window's property directly.

So do it like this:

window.addEventListener('scroll', yourFunction, false);