Question

我正在尝试实施一种解决方案，其中当您滚动浏览网站的各个部分时，用

标记

<section>
</section>

HTML标记，

<meta name="theme-color" content="#535353">

进行更改，例如您有3个区域，第一个区域为黑色背景，第二个为白色，第三个为红色-滚动浏览每个部分时，主题颜色会相应更改。到目前为止，我有：

document.querySelector('meta[name="theme-color"]').setAttribute('content',  '#535353');

但是我不确定从这里到哪里。希望你们能帮助我，谢谢。

Answer 1

下面的代码可以解决问题：

css：

  <section data-theme-color="red">
    <p>sesction conent</p>
  </section>
  <section data-theme-color="green">
    <p>sesction conent</p>
  </section>
  <section data-theme-color="blue">
    <p>sesction conent</p>
  </section>

html：

var theme = document.querySelector('meta[name="theme-color"]'),
  getThemeColor = theme.getAttribute('content'),
  sectionElem = document.getElementsByTagName('section'),
  sectionHeight = sectionElem[0].clientHeight,
  sectionLength = sectionElem.length;

// set color on load
window.onload = () => {
  document.body.style.backgroundColor = theme.getAttribute('content');
}

// set color on 'scroll' event
window.addEventListener('scroll', (e) => {
  var offset = window.pageYOffset,
    sectionIndex = parseInt(offset, "10") % sectionLength,
    sectionColor = document.getElementsByTagName('section')[sectionIndex].getAttribute('data-theme-color'),
    setSectionColor = theme.setAttribute('content', sectionColor);

  document.querySelectorAll('section')[sectionIndex].style.backgroundColor = theme.getAttribute('content');
});

和js：

sizeof(struct websocketheader)

滚动更改主题颜色

1 个答案: