滚动后更改 CSS答案

【问题标题】：Change CSS After Scrolling滚动后更改 CSS
【发布时间】：2015-02-08 08:45:34
【问题描述】：

我有一个导航栏，它使用一些 CSS 来改变不透明度：

.navbar {
    background-color: #4B5253;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

在用户向下滚动一定数量的像素后，我需要将opacity 更改为1.0，例如500px。

我正在使用 jQuery，但我没有找到解决方案。

另外，我不擅长 JavaScript，有时我不知道我应该把我的代码放在哪里。所以如果有什么办法可以用 CSS 来做这一切，那就太好了！

Here is an example of what I want——向下滚动时请密切注意标题。

【问题讨论】：

标签： javascript css scroll

【解决方案1】：

如果你想要一个本地解决方案，那么使用这个：

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);

这是一个现场演示

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}

window.addEventListener("scroll", changeCss , false);

body{
  background-color: white;
  height: 1000vh
}
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  text-align: center;
  background: blueviolet
}
nav li{display: inline-block}
nav a{
  padding: 10px 12px;
  color: white;
  text-transform:uppercase;
  text-decoration: none
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

【讨论】：

【解决方案2】：

完成你想要做的最简单的方法是结合一些简单的 jQuery 和 CSS 转换。

我们将使用 JavaScript 在每个滚动事件上检查窗口滚动位置，并将其与 #main 元素底部的距离进行比较；如果滚动位置更大，那么我们将向 body 应用一个类来指示我们已经滚动过去 #main，然后我们将使用 CSS 来定义该状态的导航样式。

更改 CSS 代码，使其在超过 #main 时更改不透明度。

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll', function() {

  // we round here to reduce a little workload
  stop = Math.round($(window).scrollTop());
  if (stop > mainbottom) {
    $('.nav').addClass('past-main');
  } else {
    $('.nav').removeClass('past-main');
  }

});

.nav {
  background-color: transparent;
  color: #fff;
  transition: all 0.25s ease;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ccc;
  padding: 1em 0;
  /* make sure to add vendor prefixes here */
}

.nav.past-main {
  background-color: #fff;
  color: #444;
}

#main {
  height: 500px;
  background-color: red;
}

#below-main {
  height: 1000px;
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

【讨论】：

【解决方案3】：

我为 a 类编写 CSS，然后为 b 类编写 CSS。

.a 中的不透明度为 0.8，.b 中的不透明度为 1.0。使用 jQuery，我只是更改了元素的类：

.a {
    opacity: 0.8;
}

.b {
    opacity: 1.0;
}

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 500;

    if ($heightScrolled < $defaultHeight) {
        $('#mynav').removeClass("b")
        $('#mynav').addClass("a")
    }
    else {
        $('#mynav').addClass("b")
    }

});

【讨论】：