繁体   English   中英

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

[英]jQuery fade out when scrolling: element flickers on viewport border

我有此代码:

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

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

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

谢谢拉尔夫

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

PS:-如果您注意到观察词很多,请尝试查看相交观察器以实现这种功能,而不进行所有容易出错的计算。 它们不是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类,您将获得想要的淡入效果。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM