1
I need to detect when the scroll page (whether it is the mouse scroll or the browser sidebar) go through a certain div, and identify the beginning and the end of it, because I need to apply an animation when the scrolling is going through it. Does anyone have an idea where to start at least?
3
You can detect by scrolling when the div appears completely in the window (see explanations in the code itself). I used as an example a div with class .mdiv, then you change according to the class, id or other selector you are using.
$(window).on("scroll", function(){ // dispara o evento scroll da janela
var div_heigh = $(".mdiv").height(); // pega a altura da div
var win_heigh = window.innerHeight; // pega a altura da janela
var win_scrol = $(this).scrollTop(); // pega o valor da rolagem da janela
var div_topo = $(".mdiv").offset().top; // distância da div até o início do documento
var distancia = div_topo - win_scrol - win_heigh; // distância da div até a borda inferior da janela
// se a distância da altura da div à borda inferior da janela for menor ou igual a 0
if(distancia <= -div_heigh){
$(this).off("scroll"); // cancelo o evento "scroll" para não entrar novamente no "if"
console.log("a div apareceu toda!");
}
});.esp{
height: 500px;
background: yellow;
}
.mdiv{
height: 200px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="esp">Role para baixo</div>
<div class="mdiv">Minha div</div>
<div class="esp">Espaçador</div>Cool, and I wonder if there’s any way to identify when she stops showing up all over the screen?
Man, I was watching here, it depends a lot on what you want to do, whether you’re going to run something just once or whenever the whole div shows up, when it all comes off the screen. I made the code here, but then you have to define these criteria so that you don’t run the same code every time you scroll. See Jsfiddle: https://jsfiddle.net/rcw7uvks/2/
Actually the thing is, I’m trying to do a Parallax on an image that is positioned in a column to the left of this div, so I wanted to identify it when I was going through with the scroll. It will be like this has a background image of the whole line that already has a Parallax and now I need to create this other Parallax in this other image. Maybe my logic is wrong.
Blz.. I’m just a little busy here, but let’s look at the question properly. It seems to me to be simple, it is that I need to analyze more deeply. I warn you.
Relax, if you can help me tomorrow I appreciate it, and I’ll leave my thanks here until now!
0
Usa that one library, it automatically detects when you are scrolling down, but now something you will need to use is the data-aos-offset="pixels". There is another library that I used, I’m just not remembered, dps put here. It detects when the div is inside the window.
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 100vw; height: 100vh; }
.nothing {
background: black;
width: 100%;
height: 100%;
}
.animated {
background: red;
width: 100%;
height: 100%;
}<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
window.onload = function() {
AOS.init()
}
</script>
<div class="nothing"></div>
<div class="animated" data-aos="fade-right" data-aos-offset="10"></div>Go stir in the data-aos-offset as each div needs, and of course take a look at documentation to put your own animations
Browser other questions tagged javascript html jquery
You are not signed in. Login or sign up in order to post.
Wouldn’t it be better to define one thing or another? For example, when the whole div appears on the screen?
– Sam
Well, I think it would work this idea of the whole div appearing on the screen, I hadn’t thought of that.
– Igor Mello
I’ll put an answer that detects when the whole div is on the screen.
– Sam