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

Question

我有一个问题，我有两个 div，#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>

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