Question

我的代码：

window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
  var windowScroll = $(window).scrollTop();
  var idScroll = $('.me').offset().top;
  var height = $("#half-who").height();
  if (windowScroll > idScroll) {
    $('.me').addClass('me-fixed');
  } else {
    $('.me').removeClass('me-fixed');
  }
}

我想在滚动经过某个点时添加一个类，并在小于该特定点时将其删除。

Answer 1

将idScroll值设置在scrollWhere函数之外，因为它会一次又一次地重新启动计算，并且每次返回不同的值，因为它具有fixed位置。请查看下面的代码段以供参考。

＆＃13;

window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;

function scrollWhere(e) {
  var windowScroll = $(window).scrollTop();
  //var height = $("#half-who").height();
  if (windowScroll > idScroll) {
    $('.me').addClass('me-fixed');
  } else {
    $('.me').removeClass('me-fixed');
  }
}

＆＃13;

.container {
  height: 300vh;
  width: 100%;
  background-color: grey;
  padding: 0;
  margin: 0;
}

.content {
  height: 100px;
  width: 100%;
  background-color: cyan;
}

.me {
  height: 50px;
  width: 100%;
  background-color: red;
}

.me-fixed {
  position: fixed;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content"></div>
  <div class="me"></div>
</div>

＆＃13;

Answer 2

这是一个在滚动传递某个点时添加类的简单示例。希望你能得到一个想法。 >>> JSFiddle

＆＃13;

$(window).scroll(function(){
	
  var winH = $(window).scrollTop();
	var ruler = $('.ruler').position().top;
  
  
  if(ruler < winH){
  	$('.nav').addClass('me-fixed');
  }
  else{
  	$('.nav').removeClass('me-fixed');
  }
  
});

＆＃13;

body{
  height: 1500px;
}
.nav{
  height: 50px;
  background: #a1bfbe;
  color: #000;
  width: 100%;
  position: relative;
  top: 250px;
  text-align: center;
}
.nav.me-fixed{
  background: #c2debf;
}
p{
  font-size: 20px;
  display: none;
}
.me-fixed p{
  display: block;
}

.ruler{
  position: fixed;
  top: 150px;
  border-bottom: 1px solid red;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <p>
    Fixed
  </p>
</div>

<div class="ruler">
</div>

＆＃13;

此外，如果您可以提供html和css结构，则很容易识别问题。

我无法添加和删除类

2 个答案: