0
148
VistasSticky Floating Div Elements When Scrolling
I want to make a sticky and floating element. Basically, it's like when you are scolling youtube video on your phone. The video keep playing on the top, even you are scrolling down your screen. I've tried the position: sticky but it doesn't work. How can I do this? Thanks in advance
<div class="renungan-img-mobile feature-img" style="position: sticky;">
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<div class="image-wrapper">
<img src="noimage.png" style="cursor:pointer" />
<img class="play-button-renungan-mobile" src="noimage.png" alt="" loading="lazy">
</div>
</div>
<div class="youtube-video" style="display:none">
<iframe src="https://www.youtube.com/embed/XbxXgR_7EuI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You need to set a position for it to stick to
body {
height: 4000px;
}<div class="renungan-img-mobile feature-img" style="position: sticky; top: 50px;">
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<div class="image-wrapper">
<img src="noimage.png" style="cursor:pointer" />
<img class="play-button-renungan-mobile" src="noimage.png" alt="" loading="lazy">
</div>
</div>
<div class="youtube-video" style="display:none">
<iframe src="https://www.youtube.com/embed/XbxXgR_7EuI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta