javascript - 当我在移动设备上滚动时，如何更改 的颜色？

Question

I already did it on desktop, but when I try the code with mobile, it crashes for some reason

    window.onscroll = () => {
  const nav = document.querySelector('#navbar');
 var viewportWidth = $(window).width();        
if (viewportWidth > 1020) {
        if(this.scrollY <= 500) nav.className = ''; else nav.className = 'scroll';}

};

Answer 1

响应式设计往往很难使用 JS 进行模拟，因此不要使用 JS 做超出必要的事情:

window.onscroll = () => {
  const nav = document.querySelector('#navbar');
  nav.className = (this.scrollY <= 500) ? '' : 'scroll';
};

并使用 CSS 媒体查询来仅在移动设备上更改颜色:

#navbar.scroll {
  /* when scrolling on desktop */
  background-color: green;
}


@media screen and (max-width: 1019px) {
  #navbar.scroll {
    /* when scrolling on tablets or mobile */
    background-color: red;
  }
}