Question

我正在寻找一种在页面滚动到某个点时将类添加到 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 将是不同的值，因此该类被添加到早/晚。

我也尝试过 this way 只是为了意识到它给了我同样的问题。

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

Answer 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

Answer 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>

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

2 个答案: