我无法添加和删除课程

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

在scrollWhere 函数之外获取您的idScroll 值，因为它一次又一次地重新启动计算并每次返回不同的值，因为它具有fixed 位置。检查下面的 sn-p 以供参考。

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');
  }
}

.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;
}

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

Answer 2

这是一个简单的例子，当滚动经过某个点时添加一个类。希望你能得到一个想法。 >>> JSFiddle

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

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%;
}

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

另外，如果你能提供html和css结构，就很容易发现问题。