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＆gt; =（500 + $（'＃divTwo'）。height（））。这正是Patrick所描述的。添加类将改变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/

使用scrollTop（）滚动时菜单闪烁

1 个答案: