Question

我有以下代码：

.fade元素的不透明度= 0。当元素到达视口时，我将添加“可见”类，并在离开该类后将其删除。到目前为止，一切正常，但是当到达视口上方边界时，元素显示出奇怪的闪烁：它们消失，再次出现并再次消失，好像不确定它们是在视口上还是在视口外。这是我的jQuery和CSS：

	$(window).scroll(function() {
		var tags = $(".fade");
		for (var i = 0; i < tags.length; i++) {
			var tag = tags[i];
			if(isScrolledIntoView($(tag))){
				$(tag).addClass("visible");
			}
			else {
				$(tag).removeClass("visible");
			}
		}
	});
	function isScrolledIntoView(elem){
		var $elem = $(elem);
		var $window = $(window);
		var docViewTop = $window.scrollTop();
		var docViewBottom = docViewTop + $window.height();
		var elemTop = $elem.offset().top;
		var elemBottom = elemTop + $elem.height();
		return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
	}

.panel { 
  height: 500px; 
  position: relative;
  color: white;
}

.p1 { background: red; }
.p2 { background: green; }
.p3 { background: orange; }
.p4 { background: green; }

.fade {
  background: black;
  color: white;
  position: absolute;
  max-width: 500px;
  padding: 2.0rem;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0); 
}

.fade.visible {
  opacity: 1;
  transition: all 1.0s;
  transform: translate(-50%, -50%); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='panel p1'>
<div class='fade'>Content Fade 1</div>
</div>

<div class='panel p2'>
<div class='fade'>Content Fade 2</div>
</div>

<div class='panel p3'>
<div class='fade'>Content Fade 3</div>
</div>

<div class='panel p4'>
<div class='fade'>Content Fade 4</div>
</div>

滚动速度越慢，问题越明显。我宁愿在元素完全不在视口之前删除类，甚至可能再加上一些额外的空间。

任何帮助我击败这个棘手的小恶魔的提示都值得欢迎。

谢谢拉尔夫

Answer 1

编辑：-我添加了代码段以正确执行此操作。您已经实现了大多数目标，只留下了一些小错误，您发现看不到元素从视口移出并以某种方式移回原位，这会破坏目的，您可以做的是将另一个div用作占位符您要隐藏/显示并观察该div的div的默认可见位置。该代码段及其代码将向您显示。

P.S：-如果您注意到很多观察词，请尝试查看相交观察器以实现这种功能，而无需进行所有容易出错的计算。它们不是100％与浏览器兼容，只是看着您的听众，而且该摘录提供了有效的方法，我已经对其进行了测试。

$(window).scroll(function() {
    var tags = $(".fade");
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i];
        if(isScrolledIntoView($(tag).siblings(".fade-check"))){
            $(tag).addClass("visible");
        }
        else {
            $(tag).removeClass("visible");
        }
    }
});
function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

.panel { 
    height: 500px; 
    position: relative;
    color: white;
}

.p1 { background: red; }
.p2 { background: green; }
.p3 { background: orange; }
.p4 { background: green; }

.fade {
    background: black;
    color: white;
    max-width: 500px;
    padding: 2.0rem;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0); 
    transition: all 1.0s;
}
.fade-check {
    padding: 2.0rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 1rem;
}
.fade.visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class='panel p1'>
        <div class='fade-check'></div>
        <div class='fade'>Content Fade 1</div>
    </div>

    <div class='panel p2'>
        <div class='fade-check'></div>
        <div class='fade'>Content Fade 2</div>
    </div>

    <div class='panel p3'>
        <div class='fade-check'></div>
        <div class='fade'>Content Fade 3</div>
    </div>

    <div class='panel p4'>
        <div class='fade-check'></div>
        <div class='fade'>Content Fade 4</div>
    </div>
</body>

之所以发生这种情况，是因为您依靠.fade元素的偏移值来确定它们是否已经向上滚动以及是否已经向上滚动。您正在对它们应用平移，这将改变偏移结果，这就是为什么要获得摆动效果的原因，只需从fade.visible元素中删除translate: transform(-50%, -50%)并将过渡移到.fade类中，您将得到您想要的渐隐效果。

滚动时jQuery淡出：视口边框上的元素闪烁

1 个答案: