[英]Show/hide div or image when scrolling
Is there a way to show an image or a div when scrolling down a web page and hide it when not scrolling and vice versa?有没有办法在向下滚动网页时显示图像或 div 并在不滚动时隐藏它,反之亦然?
So in the code below the red div would be displayed when not scrolling, and the green div would be displayed only when scrolling.所以在下面的代码中,红色的 div 会在不滚动时显示,而绿色的 div 只会在滚动时显示。
.square { position: fixed; width: 100px; height: 100px; } .green { background: green; display: none; } .red { background: red; } .container { width: 100%; height: 3000px; }
<div class="container"> <div class="square green"></div> <div class="square red"></div> </div>
The end goal is to achieve something like this: https://mailchimp.com/annual-report/ where the character appears to be walking when the user scrolls, and stands still when the user stops.最终目标是实现这样的目标: https ://mailchimp.com/annual-report/ 当用户滚动时角色似乎正在行走,而当用户停止时则静止不动。 Is this easily achievable?这很容易实现吗?
You just need an eventListener
that listen to a scroll
event.您只需要一个监听scroll
事件的eventListener
。 However this has the issue that it only recoginze when you scroll but not when you stop scrolling.然而,这有一个问题,它只在您滚动时识别,而不是在您停止滚动时识别。 For that you can use this answer that explains how to listen for a "scroll-stop"为此,您可以使用解释如何收听“滚动停止”的答案
To make the code shorter and easier, I removed your display: none
from the green box.为了使代码更短更容易,我从绿色框中删除了您的display: none
。 I added a new class d-none
that contains this proeprty now instead.我现在添加了一个包含此属性的新类d-none
。 By default it is added to the green box.默认情况下,它被添加到绿色框中。
With classList.toggle('d-none')
I can toggle class within both boxes which makes it easier then to address and then add or remove the class for every box on its own.使用classList.toggle('d-none')
我可以在两个框中切换类,这样可以更轻松地解决然后为每个框单独添加或删除类。
var timer = null; var box = document.querySelectorAll('.square'); window.addEventListener('scroll', function() { if (timer !== null) { clearTimeout(timer); } else { box.forEach(el => el.classList.toggle('d-none')); } timer = setTimeout(function() { box.forEach(el => el.classList.toggle('d-none')); }, 150); }, false);
.d-none { display: none; } .square { position: fixed; width: 100px; height: 100px; } .green { background: green; /* display: none; */ /* removed */ } .red { background: red; } .container { width: 100%; height: 3000px; }
<div class="container"> <div class="square green d-none"></div> <div class="square red"></div> </div>
You just need a setTimeout function:你只需要一个 setTimeout 函数:
(function($) { $(function() { $(window).scroll(function() { $('.square.red').show() $('.square.green').hide() clearTimeout($.data(this)); $.data(this, setTimeout(function() { $('.square.red').hide() $('.square.green').show() }, 250)); }); }); })(jQuery);
.square { position: fixed; width: 100px; height: 100px; } .green { background: green; } .red { background: red; display: none; } .container { width: 100%; height: 3000px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="square green"></div> <div class="square red"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.