fullpage 滚动粘性_如何在页面滚动上创建“粘性”浮动视频

最新推荐文章于 2021-06-03 20:20:54 发布

daique1908

最新推荐文章于 2021-06-03 20:20:54 发布

阅读量340

点赞数

文章标签： js javascript vue css html ViewUI

fullpage 滚动粘性

如果您最近发现自己正在浏览媒体网站-视频流服务，新闻网站，Facebook等-您可能已经注意到有关其视频播放器的趋势。如果我们向下滚动显示视频的页面，它将使播放器浮动并收缩，将其粘贴到视口的一侧，而不是从视线中丢失。

这使用户可以在观看视频的同时，同时浏览其他内容。在本教程中，我将向您展示如何重新创建相同的体验-因此，事不宜迟，让我们开始吧！

例子

就是这样，我们都在同一页面上，这里有几个例子：

添加YouTube视频

首先，让我们与YouTube视频一起构建页面标记。至关重要的是，我们在视频中嵌入了enablejsapi=1参数；此参数将使我们能够通过Youtube Iframe API与视频进行交互。

<div class="site-content">
<div class="container">
 <header class="content-header">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p>

   <!-- The YouTube video -->
    <figure class="content-media content-media--video" id="featured-media">
      <iframe class="content-media__object" id="featured-video" src="https://www.youtube.com/embed/SF4aHwxHtZ0?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0"></iframe>
    </figure>

 </header>
 <!-- Content Body -->
 <div class="content-body">
 </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="scripts/main.js"></script>

如您所见，在页面底部，我们还添加了三个JavaScript文件。即jQuery（为我们提供Youtube Iframe API的脚本）和main.js ，我们将在其中编写自定义JavaScript。

造型

您可以根据自己的喜好对页面进行样式设置，但是我们在此特别关注的样式是与YouTube视频相关的样式。首先，我们添加样式以使YouTube视频具有响应性。这些规则最终还将使.content-media--video容器在重新放置YouTube视频时能够保持其宽高比。

.content-media--video {
   background-color: #ddd;
   display: block;
   position: relative;
   padding: 0 0 56.25% 0;
}
.content-media--video iframe {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

浮动视频播放器样式

我们接下来CSS规则定义了YouTube视频的浮动方式。我们正在使用选择器.is-sticky- ，该选择器将通过JavaScript动态添加到播放器中，以将视频浮动在页面上。这也将视频缩小到大小，将其定位在左侧，然后将其调整为几个视口大小。

#featured-video {
  transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
}
/** Use .sticky */
#featured-video.is-sticky {
  position: fixed;
  top: 15px;
  left: auto;
  max-width: 280px;
  max-height: 158px;
  width: 280px;
  height: 158px;
}
@media screen and (min-width: 1120px) {
   #featured-video.is-sticky {
      transform: translateX(-80%);
   }
}
@media screen and (min-width: 1300px) {
   #featured-video.is-sticky {
      transform: translateX(-115%);
   }
}

注意：您应该根据受众群体和网站的性质来调整这些属性（大小和位置）。例如，如果您的网站内容是从右到左书写的，则可能会影响您认为最适合放置视频播放器的位置。

现在，当我们加载此页面时，我们可以看到显示了YouTube视频以及我们的一些任意内容。

编写JavaScript

我们来到了本教程的激动人心的部分； JavaScript！此时我们的main.js文件内容如下：

jQuery( function( $ ) {
   // Write Code here.
} );

上面的代码片段等同于$(document).ready() ，一旦页面上的所有元素都已解析并可用，我们就可以执行JavaScript。

接下来，我们定义一些变量。我在每个变量的侧面添加了内联注释，以解释发生了什么。

var $window = $( window ); // 1. Window Object.
var $featuredMedia = $( "#featured-media" ); // 1. The Video Container.
var $featuredVideo = $( "#featured-video" ); // 2. The Youtube Video.

var player; // 3. Youtube player object.
var top = $featuredMedia.offset().top; // 4. The video position from the top of the document;
var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset.

YouTube iframe API

如前所述，我们添加了JavaScript文件，该文件可访问YouTube Iframe API。加载此API后，将触发名为onYouTubeIframeAPIReady的函数。此功能在全局级别可用。并且由于我们的脚本嵌套在jQuery( function( $ ) { }); ，我们必须在window对象中实现此功能，如下所示：

window.onYouTubeIframeAPIReady = function() {
player = new YT.Player( "featured-video", {
   events: {
     "onStateChange": onPlayerStateChange
   }
} );
};

如您所见，在函数中，我们选择了iframe的ID属性，并传递了一个名为onPlayerStateChange的函数。播放，暂停或结束YouTube视频播放器时，将触发此功能。

onPlayerStateChange传递了一个Event对象，该对象为我们提供了可用的数据。例如，在这种情况下，我们将使用Event .data对象获取视频状态。

如下所示，视频状态用数字表示； 1是视频播放时， 2是视频暂停时， 3是视频结束时。状态更改时，我们将相应地添加和删除类名。

/**
 * Run when the Youtube video state (play, pause, etc.) is changed.
 *
 * @param {Object} event The Youtube Object Event.
 * @return {Void}
 */
function onPlayerStateChange( event ) {

   var isPlay  = 1 === event.data;
   var isPause = 2 === event.data;
   var isEnd   = 0 === event.data;

   if ( isPlay ) {
      $featuredVideo.removeClass( "is-paused" );
      $featuredVideo.toggleClass( "is-playing" );
   }

   if ( isPause ) {
      $featuredVideo.removeClass( "is-playing" );
      $featuredVideo.toggleClass( "is-paused" );
   }

   if ( isEnd ) {
      $featuredVideo.removeClass( "is-playing", "is-paused" );
   }
}

浮动并粘贴视频

以下是浮动并粘贴我们的视频播放器的代码。值得注意的是，我们仅应在播放视频时浮动视频。因此，在添加is-sticky类之前，我们首先要检查iframe是否具有is-playing类：

$window
.on( "resize", function() {
   top = $featuredMedia.offset().top;
   offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) );
} )

.on( "scroll", function() {
   $featuredVideo.toggleClass( "is-sticky",
     $window.scrollTop() > offset && $featuredVideo.hasClass( "is-playing" )
   );
} );

测试您所做的事情，您应该会看到一切正常！