有次不小心进到了优酷，发现优酷有个不错的功能，能大大的提升用户体验，就让我们一起来实作这个效果吧！

在第 08 篇的时候，我们已经成功做出简易的拖拉效果，今天要来做一个完整的应用，而且是实务上有机会遇到但不好处理的需求，那就是优酷的影片效果！

当我们在优酷看视频时往下滚动画面，影片会变成一个小窗口在右下角，这个窗口还能够拖拉移动位置。 这个功能可以让用户一边看留言同时又能看影片，且不影响其他的信息显示，真的是很不错的 feature。

就让我们一起来实作这个功能，同时补完拖拉所需要注意的细节吧！

需求分析

首先我们会有一个影片在最上方，原本是位置是静态（static）的，卷轴滚动到低于影片高度后，影片改为相对于窗口的绝对位置（fixed），往回滚会再变回原本的状态。 当影片为 fixed 时，鼠标移至影片上方（hover）会有屏蔽（masker）与鼠标变化（cursor），可以拖拉移动（drag），且移动范围不超过可视区间！