当页面滚动到某个点时，CSS/JS 将类添加到 div答案

【问题标题】：CSS/JS Add class to div when page is scrolled to a certain point当页面滚动到某个点时，CSS/JS 将类添加到 div
【发布时间】：2021-08-05 15:31:36
【问题描述】：

我正在寻找一种在页面滚动到某个点时将类添加到 div 的方法。

我的 CSS 的重要部分：

.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 6.5vh;
}

.top-bar-bg {
    background: -moz-linear-gradient(0deg,#6272e9,#36104a);  
}

我尝试使用

添加类 (top-bar-bg)

window.addEventListener("scroll", function(event){
var scroll = this.scrollY;
if(scroll > 860) {
   this.document.getElementById("nav").classList.add("top-bar-bg");
} else {
   this.document.getElementById("nav").classList.remove("top-bar-bg");
}
});

然后注意，当我放大或缩小时，scrollY 将是不同的值，因此该类被添加到 early/late。

我也尝试过this way，但发现它给了我同样的问题。

我错过了什么（很明显）吗？或者这不是正确的方法吗？如果你知道怎么做，请告诉我。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

我已经简化了代码并彻底修改了它。

$(function(){
    var btn = $('.button');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= btnPosTop){
            //we've reached the button
            btn.css({position:'fixed',top:0,marginTop:0});
        }else if(btn.css('position') === 'fixed'){
            //if we scroll back up past the button's original position, and the button had previously been changed to its fixed position, we change it back
            btn.css({position:'',top:'',marginTop:'100px'});
        }
    });
});

无论如何，您应该将使文本显示在if(scrollTop >= btnPosTop) 语句中的代码。就像按钮一样，它应该获得一个固定的位置（通过在 JS 中设置它或通过将一个类添加到其 CSS 指定为具有position:fixed 的包含 div）以便它随着页面滚动而移动。

小提琴：JSFiddle Example

【讨论】：

重写你提到的方式没有问题。但这并不能解决我的问题，因为当我缩小时，将类添加到早期的问题（重要的是它不是因为它是菜单栏）仍然存在，因为 win.scrollTop();页面缩小越多，越大越快：如果我滚动到需要以 100% 缩放更改的点，scrollTop 为 969，当我以 50% 缩放执行此操作时，它为 1836。但是因为偏移量仍然是值，该类已添加到“滚动方式”的一半。

【解决方案2】：

这就是你要找的吗？

$(document).ready(function() {
  $(window).scroll(function(){
      if ($(this).scrollTop() > 10) {
         $('.box').addClass('box-hover');
      } else {
         $('.box').removeClass('box-hover');
      }
  });
});

.box {
color: red;
}

.box:hover {
color: orange
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">1</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- After scroll down add class box-hover-->
<div class="box box-hover">1</div>

【讨论】：

当我将鼠标悬停在它上面时，我不需要更改它，请阅读我对 Theodores 回复的评论，以详细解释我的问题所在。