スクロールでスティッキー/ドラッグ可能なビデオ

Question

ユーザーがビデオを再生してページまたはポストをスクロールし始めると、ビデオプレーヤーはプライマリポジションからあなたが設定したリーダースクリーンの位置に固定されます。したがって、ビデオはウェブページの別の部分にスクロールしている間も見えるままです。

例：（右の動画を再生しよう） https://www.cnet.com/news/

Answer 1

あなたはvideo要素がある位置にチェックする必要があり、これを行うには。 jquery関数でこれを行うことができますscrollPos()

これを実現する方法を知るには、フィドルを作成してください。フィドルはとてもシンプルです。基本的なアイデアを伝えるだけです。

これはあなたのニーズに合わせて編集できます。

$(document).ready(function() { 
 
\t 
 
    var scrollTop = $(".container").scrollTop(); 
 
    
 
    $(".container").scroll(function() { 
 
    \t var scrollTop = $(this).scrollTop(); 
 
    \t 
 
    \t if(scrollTop > 155) { 
 
    \t $(".video").animate({ 
 
     "height": "100px", 
 
     "width": "200px", 
 
     }); 
 
     $(".video").css({ 
 
     \t "position": "fixed", 
 
     "top": 20, "right": 40, 
 
     }); 
 
    }; 
 
    }); 
 
    
 
});

.container { 
 
    height: 200px; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 

 
.container .video { 
 
    background: #ededed; 
 
    height: 300px; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="content"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. 
 
    </p> 
 
    <div class="video-container"> 
 
     <div class="video"> 
 
     
 
     </div> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur felis ut nibh aliquet tristique. Quisque vel pretium enim, eget euismod libero. Donec ipsum dui, fermentum sed turpis dictum, iaculis blandit velit. 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

私は多分それは助け、この目的のためのシンプルなライブラリをまとめます。

https://github.com/afuggini/sticky_video