CODEWITHSUNDEEP
javascripthtmljquerycss
Mike Setyawan Mulyono
Mike Setyawan Mulyono

Reputation: 29

Sticky 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>
enter image description here

Upvotes: 0

Views: 360

Answers (1)

Rojo
Rojo

Reputation: 2869

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>

Upvotes: 1

Related Questions