代码之家 › 专栏 › 技术社区 › user6792790

当我们在web的特定部分上滚动时,如何更改元素的样式?

css html javascript

user6792790 · 技术社区 · 8 年前

当我们像下面的网站一样滚动到网站的相应部分时,我试图改变元素(菜单按钮)的背景色。

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

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库。

1 回复 | 直到 8 年前

Thusitha 8 年前

更换当前 JavaScript 使用以下代码。通过消除代码重复并简化条件,我对其进行了一些清理。你必须记住的一件事是你必须调整你的 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()
};