javascript - 当我们滚动网页的特定部分时如何更改元素的样式？

Question

https://jsfiddle.net/dwzqs1vg/

当我们滚动到网站的相应部分时，我正在尝试更改元素(菜单按钮)的背景颜色，就像下面的网站一样。

https://blackrockdigital.github.io/startbootstrap-freelancer/

但我不确定如何设置“在特定的 div 部分内滚动时”的条件。

window.addEventListener('scroll', () => {
    if(this.pageYOffset < document.getElementById('firstRow').offsetTop){
        document.getElementById("aboutbutton").style.backgroundColor = 'gray';
        document.getElementById("archivebutton").style.backgroundColor = '#333';
        document.getElementById("projectbutton").style.backgroundColor = '#333';
        document.getElementById("contactbutton").style.backgroundColor = '#333';
    }
    if(document.getElementById('firstRow').offsetTop < this.pageYOffset && this.pageYOffset < document.getElementById('secondRow').offsetTop){
        document.getElementById("aboutbutton").style.backgroundColor = '#333';
        document.getElementById("archivebutton").style.backgroundColor = 'gray';
        document.getElementById("projectbutton").style.backgroundColor = '#333';
        document.getElementById("contactbutton").style.backgroundColor = '#333';
    }
    if(document.getElementById('secondRow').offsetTop < this.pageYOffset && this.pageYOffset < document.getElementById('thirdRow').offsetTop){
        document.getElementById("aboutbutton").style.backgroundColor = '#333';
        document.getElementById("archivebutton").style.backgroundColor = '#333';
        document.getElementById("projectbutton").style.backgroundColor = 'gray';
        document.getElementById("contactbutton").style.backgroundColor = '#333';
    }
    if(document.getElementById('thirdRow').offsetTop < this.pageYOffset && this.pageYOffset < document.getElementById('fourthRow').offsetTop){
        document.getElementById("aboutbutton").style.backgroundColor = '#333';
        document.getElementById("archivebutton").style.backgroundColor = '#333';
        document.getElementById("projectbutton").style.backgroundColor = '#333';
        document.getElementById("contactbutton").style.backgroundColor = 'gray';
    }

})

到目前为止我已经尝试过上面的内容，但是在我进入相应的行之前样式就发生了变化。我错过了什么？

附言。我尽量不使用 jquery 和其他 JS 库。

Answer 1

将您当前的 JavaScript 代码替换为以下代码。我通过删除代码重复和简化条件来稍微清理一下。您必须记住的一件事是您必须根据顶部标题导航栏调整您的 OFFSET。您可以使用 OFFSET 并调整它以获得最佳观看体验。

var nav = document.querySelector('.nav');

function changeColor(aboutbutton, archivebutton, projectbutton, contactbutton) {
  document.getElementById("aboutbutton").style.backgroundColor = aboutbutton;
  document.getElementById("archivebutton").style.backgroundColor = archivebutton;
  document.getElementById("projectbutton").style.backgroundColor = projectbutton;
  document.getElementById("contactbutton").style.backgroundColor = contactbutton;
}

changeColor('gray', '#333', '#333', '#333');

var OFFSET = 90;

window.addEventListener('scroll', () => {

  if (this.pageYOffset > document.getElementById('fourthRow').offsetTop - OFFSET) {
    changeColor('#333', '#333', '#333', 'gray');
  } else if (this.pageYOffset > document.getElementById('thirdRow').offsetTop - OFFSET) {
    changeColor('#333', '#333', 'gray', '#333');
  } else if (this.pageYOffset > document.getElementById('secondRow').offsetTop - OFFSET) {
    changeColor('#333', 'gray', '#333', '#333');
  } else {
    changeColor('gray', '#333', '#333', '#333');
  }

})

function fixIfScrolled() {

  if (window.scrollY >= nav.offsetTop) {
    nav.classList.add("stationary");
  } else {
    nav.classList.remove("stationary");
  }

  if (window.scrollY == nav.offsetTop) {
    nav.classList.add("largerNavbar");

  } else {
    nav.classList.remove("largerNavbar");
  }

}

window.onscroll = function() {
  fixIfScrolled()
};