滚动上的粘滞/可拖动视频

Question

当用户播放视频并开始滚动页面或帖子时，视频播放器将从主要位置固定到您设置的阅读器屏幕的位置。因此，即使在滚动到网页的其他部分时，视频仍然可以查看。

示例:(尝试播放右侧的视频） https://www.cnet.com/news/

Answer 1

要执行此操作，您需要检查video元素的位置。您可以使用jquery函数scrollPos()

执行此操作

为了让您了解如何实现这一点，我创造了一个小提琴。小提琴非常简单。只是为了给你一个基本的想法。

您可以根据自己的需要进行编辑。

$(document).ready( function() {
	
  var scrollTop = $(".container").scrollTop();
  
  $(".container").scroll( function() {
  	var scrollTop = $(this).scrollTop();
  	
  	if(scrollTop > 155) {
    	$(".video").animate({
        "height": "100px",
        "width": "200px",
      });
      $(".video").css({
      	"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