时间戳

首页 > 解决方案 > 在滚动时更改 div / iframe？

css - 在滚动时更改 div / iframe？

问题描述

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    margin-bottom: 20px;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div id="video-embeds">
    <div class="video-embed" style="">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/pa4IxrIsr9g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

现在，当用户向下滚动视频时，我希望<div id="video-embeds">iframe 以每个@media css 的不同大小跳到右上角，并留在那里直到用户返回到真实视频位置，然后视频将再次放置在页面上...

这个怎么做？用CSS可以吗？

更新：滚动后我有我想要的 css。

#video-embeds-fixed {
    opacity: 1;
    pointer-events: auto;
    display: block;
    width: 400px;
    height: 225px;
    transition-property: opacity, height;
    transition-duration: 366ms;
    transition-timing-function: cubic-bezier(0.05, 0, 0, 1);
    position: fixed;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.20);
    right: 12px;
    bottom: 10px;
}

.video-embed-fixed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

现在javascript或jquery在滚动#video-embeds更改为#video-embeds-fixed和.video-embed到.video-embed-fixed？

标签： cssiframe

解决方案

仅使用 css 这是不可能的，您必须使用 javascript。但首先将您的 css 固定 id 选择器更改为类（#video-embeds-fixed 在您的 css 文件中更改为 .video-embeds-fixed）。

jQuery解决方案：

var video = $('#video-embeds');
var sticky = video.offset().top;
var videoHeight = video.height();
$(window).on('load scroll resize', function() {
    if ((window.pageYOffset) >= (sticky + videoHeight)) {
        video.addClass('video-embeds-fixed');
        video.children('.video-embed').addClass('video-embed-fixed');
    } else {
        video.removeClass('video-embeds-fixed');
        video.children('.video-embed').removeClass('video-embed-fixed');
    }
});

推荐阅读