时间戳

首页 > 解决方案 > 滚动时的粘性浮动 Div 元素

javascript - 滚动时的粘性浮动 Div 元素

问题描述

我想做一个粘性和浮动元素。基本上，这就像您在手机上浏览 youtube 视频时一样。即使您向下滚动屏幕，视频也会继续在顶部播放。我已经尝试过这个位置：sticky 但它不起作用。我怎样才能做到这一点？提前致谢

<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>
在此处输入图像描述

标签： javascripthtmljquerycss

解决方案

你需要设置一个位置让它坚持

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>

推荐阅读