当特定的 div/元素滚动到视图中时，是否可以更改元素的样式？

Question

具体来说，我想在用户滚动到特定部分时动态更改页面上粘性和固定元素的颜色。我知道滚动像素高度可以做到这一点，但我不能使用这种技术，因为我的页面背景由一堆图像组成。这会导致页面的像素高度在调整窗口大小时发生显着变化，因为高度需要随着图像变宽而增加 .

我想可以通过大量媒体电话来做到这一点，但我正在努力避免这种情况，我什至不确定它是否会奏效。

我的主要目标是： 当 div 滚动到视图中时，导航栏和固定页脚的样式（主要是颜色和字体粗细）会发生变化。

另外 - 这必须在 Vanilla JS 中。

如果有人有一个纯 CSS 解决方案，那也是可以接受的，我只是想不出这样的方法。

谢谢！

Answer 1

如何使用它？

这些是 VanillaJS SpyScroll

https://github.com/cferdinandi/gumshoe

https://github.com/ederssouza/vanillajs-scrollspy

来自 Codepen zchee/pen/ogzvZZ

HTML

  <div class="m1 menu">
    <div id="menu-center">
      <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
  </div>
  <div id="home" class="section"></div>
  <div id="portfolio" class="section"></div>
  <div id="about" class="section"></div>
  <div id="contact" class="section"></div>

SCSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.menu {
  width: 100%;
  height: 75px;
  background-color: rgba(0, 0, 0, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.light-menu {
  width: 100%;
  height: 75px;
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#menu-center {
  width: 980px;
  height: 75px;
  margin: 0 auto;
  ul {
    margin: 15px 0 0 0;
    li {
      list-style: none;
      margin: 0 30px 0 0;
      display: inline;
    }
  }
}

.active {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  line-height: 50px;
}

a {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: black;
  text-decoration: none;
  line-height: 50px;
}

#home {
  background-color: grey;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#portfolio {
  height: 100%;
  width: 100%;
}

#about {
  background-color: blue;
  height: 100%;
  width: 100%;
}

#contact {
  background-color: red;
  height: 100%;
  width: 100%;
}

JS

(function() {
  'use strict';

  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
  });

  window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    for (i in sections) {
      if (sections[i] <= scrollPosition) {
        document.querySelector('.active').setAttribute('class', ' ');
        document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
      }
    }
  };
})();