0
150
VisualizaçõesSticky 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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta