使用 scrollTop() 滚动时菜单闪烁

Question

我有一个问题，我有两个 divs、#divOne 和 #divTwo，我试图让它在滚动大于或等于特定高度时变为另一个菜单。

我的第一个菜单在#divOne，第二个在#divTwo，但是当达到特定高度并将滚动条保持在同一位置时，菜单会快速更改多次，而我将滚动条保持在同一位置

这是我的代码：

$(window).scroll(function() {

    if ($(this).scrollTop() >= 500) {

        $('#divTwo').removeClass('hidden');
        $('#divOne').addClass('hidden');

    } else {

        $('#divOne').removeClass('hidden');
        $('#divTwo').addClass('hidden');
    }
});

我认为是因为当条件为真时#divOne 具有特定的高度并且是隐藏的，所以scrollTop 的值会发生变化，例如更改为 400 并做出一种奇怪的行为，我尝试添加高度#divOne 之前到 scrollTop 但我无法使其工作，所以我正在寻求帮助以解决此问题或以其他方式实现此目的，希望您能帮助我，谢谢。

你可以在这里看到JSFiddle

注意：我忘了说第二个菜单是固定的。

Answer 1

我无法在 Edge 或 Firefox 中重新创建它，最终让 Chrome 执行您所描述的操作。我将检查更改为 $(this).scrollTop >= (500 + $('#divTwo').height())。它所做的正是帕特里克所描述的。添加类会改变scrollTop，因此它会移除类，改变scrollTop，使其添加类等。这会发生在一个非常窄的滚动值范围内。

$(window).scroll(function() {	
  if ($(this).scrollTop() >= (200 + $('#divTwo').height())) {

		$('#divTwo').removeClass('hidden');
		$('#divOne').addClass('hidden');

	} else {

		$('#divOne').removeClass('hidden');
		$('#divTwo').addClass('hidden');
	}
});

.container { height: 1200px; }

#divOne { background-color: green; color: white; }

#divTwo {background-color: red; color: white; position: fixed; }

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="divOne">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ut autem libero dolore animi? Quaerat et quasi enim eius deleniti fuga. Odit ut earum deleniti optio reiciendis non impedit ullam.</p>
  </div>

  <div id="divTwo" class="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nemo eius, dolor rerum dolorem reiciendis tenetur perferendis facere, provident obcaecati veritatis reprehenderit illum voluptates velit aliquam cum architecto error! Iusto.</p>
  </div>
</div>

我不得不在小提琴中将值降低到 200 以提供足够的触发空间。 https://jsfiddle.net/p1qepst0/6/