教程标题：滚动页面时视频缩略图右下角悬浮展示与点击返回效果
欢迎来到小藕同学小笔记！在这个教程中，我们将实现一个炫酷的小功能：当用户滚动页面时，视频会自动变成右下角的小缩略图，而当用户点击缩略图时，它还能优雅地跳回页面原位。让我们一步步拆解，看看是如何实现的！
一、功能效果介绍
效果展示：【罗翔】我们为什么要读书？https://www.runwsh.com/archives/WhyShouldWeRead
在现代网页设计中，提升用户体验是设计的关键。以下是我们今天要实现的功能：
- 主视频展示：初始状态下，视频全屏居中显示。
- 右下角缩略图：当用户滚动页面，视频离开视口后，自动变为右下角的悬浮缩略图。
- 返回原位：点击右下角缩略图，页面平滑滚动回到主视频位置，视频恢复全屏模式。
这个功能适合在资讯网站、视频播放平台等场景下使用，简直不要太实用！
二、实现思路
1. 界面布局
我们需要两个主要部分：
- 主视频区域：用于展示初始视频。
- 页面内容：模拟长页面，触发滚动事件。
HTML 的结构非常简单，包含一个全屏视频区域以及长内容区：
<!-- 视频区域 -->
<div class="video-container" id="videoContainer">
<iframe
id="videoPlayer"
src="//player.bilibili.com/player.html?isOutside=true&aid=497651138&bvid=BV1BK411L7DJ&cid=177974677&p=1"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
</div>
<!-- 内容部分 -->
<div class="content">
<h1>优化滚动缩略图</h1>
<p>滚动页面，视频完全离开视口后会以缩略图形式显示在右下角。</p>
<p>点击缩略图，页面会回到主视频位置。</p>
<p>模拟长内容...</p>
<p>继续滚动测试...</p>
</div>
2. CSS 样式
使用 CSS 来定义视频的初始状态和缩略图样式。缩略图默认隐藏：
/* 视频初始样式 */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 比例 */
background: #000;
overflow: hidden;
z-index: 1000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 缩略图样式 */
.video-thumbnail {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
right: 20px;
width: 320px; /* 缩略图大小 */
height: 180px;
border: 2px solid #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 2000;
cursor: pointer;
}
3. 核心 JavaScript 逻辑
通过 JavaScript，监听滚动事件和缩略图点击事件来动态调整视频位置。
监听滚动事件
- 当页面滚动超过视频区域时，切换到缩略图模式。
- 当返回视频区域时，恢复全屏模式。
// 获取元素
const videoContainer = document.getElementById('videoContainer');
const videoPlayer = document.getElementById('videoPlayer');
const videoHeight = videoContainer.offsetHeight;
const videoOffsetTop = videoContainer.offsetTop;
// 初始化变量
let isThumbnail = false; // 当前是否为缩略图模式
// 滚动事件监听
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
// 判断视频是否完全滚出视口
if (scrollY > videoOffsetTop + videoHeight) {
if (!isThumbnail) {
// 切换到缩略图模式
isThumbnail = true;
// 使用 top 和 left 定位到右下角
const videoWidth = 320; // 缩略图宽度
const videoHeight = 180; // 缩略图高度
const viewportWidth = window.innerWidth; // 视口宽度
const viewportHeight = window.innerHeight; // 视口高度
videoPlayer.style.position = 'fixed';
videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`; // 距离底部 20px
videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`; // 距离右侧 20px
videoPlayer.style.width = `${videoWidth}px`;
videoPlayer.style.height = `${videoHeight}px`;
videoPlayer.style.border = '2px solid #fff';
videoPlayer.style.borderRadius = '8px';
videoPlayer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
}
} else {
if (isThumbnail) {
// 返回主视频模式
isThumbnail = false;
videoPlayer.style.position = 'absolute';
videoPlayer.style.bottom = '';
videoPlayer.style.right = '';
videoPlayer.style.top = '';
videoPlayer.style.left = '';
videoPlayer.style.width = '100%';
videoPlayer.style.height = '100%';
videoPlayer.style.border = 'none';
videoPlayer.style.borderRadius = '0';
videoPlayer.style.boxShadow = 'none';
}
}
});
添加点击事件
点击缩略图时，让页面平滑滚动回到主视频位置：
videoPlayer.addEventListener('click', () => {
if (isThumbnail) {
window.scrollTo({
top: videoOffsetTop,
behavior: 'smooth',
});
}
});
三、完整代码展示
以下是完整实现代码，直接复制即可运行！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单视频切换</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.content {
padding: 20px;
height: 2000px; /* 模拟长页面 */
}
/* 视频初始样式 */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 比例 */
background: #000;
overflow: hidden;
z-index: 1000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 缩略图样式 */
.video-thumbnail {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
left: 20px;
width: 320px; /* 缩略图大小 */
height: 180px;
border: 2px solid #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 2000;
cursor: pointer; /* 鼠标指针 */
}
</style>
</head>
<body>
<!-- 视频区域 -->
<div class="video-container" id="videoContainer">
<iframe
id="videoPlayer"
src="//player.bilibili.com/player.html?isOutside=true&aid=497651138&bvid=BV1BK411L7DJ&cid=177974677&p=1"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
</div>
<!-- 内容部分 -->
<div class="content">
<h1>优化滚动缩略图</h1>
<p>滚动页面，视频完全离开视口后会以缩略图形式显示在右下角。</p>
<p>点击缩略图，页面会回到主视频位置。</p>
<p>模拟长内容...</p>
<p>继续滚动测试...</p>
</div>
<script>
// 获取元素
const videoContainer = document.getElementById('videoContainerCqw');
const videoPlayer = document.getElementById('videoPlayerCqw');
const videoHeight = videoContainer.offsetHeight;
const videoOffsetTop = videoContainer.offsetTop;
// 初始化变量
let isThumbnail = false; // 当前是否为缩略图模式
// 滚动事件监听
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
// 判断视频是否完全滚出视口
if (scrollY > videoOffsetTop + videoHeight) {
if (!isThumbnail) {
// 切换到缩略图模式
isThumbnail = true;
// 使用 top 和 left 定位到右下角
const videoWidth = 320; // 缩略图宽度
const videoHeight = 180; // 缩略图高度
const viewportWidth = window.innerWidth; // 视口宽度
const viewportHeight = window.innerHeight; // 视口高度
videoPlayer.style.position = 'fixed';
videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`; // 距离底部 20px
videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`; // 距离右侧 20px
videoPlayer.style.width = `${videoWidth}px`;
videoPlayer.style.height = `${videoHeight}px`;
videoPlayer.style.border = '2px solid #fff';
videoPlayer.style.borderRadius = '8px';
videoPlayer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
}
} else {
if (isThumbnail) {
// 返回主视频模式
isThumbnail = false;
videoPlayer.style.position = 'absolute';
videoPlayer.style.bottom = '';
videoPlayer.style.right = '';
videoPlayer.style.top = '';
videoPlayer.style.left = '';
videoPlayer.style.width = '100%';
videoPlayer.style.height = '100%';
videoPlayer.style.border = 'none';
videoPlayer.style.borderRadius = '0';
videoPlayer.style.boxShadow = 'none';
}
}
});
// 点击缩略图返回主视频位置
videoPlayer.addEventListener('click', () => {
if (isThumbnail) {
window.scrollTo({
top: videoOffsetTop,
behavior: 'smooth',
});
}
});
window.addEventListener('resize', () => {
if (isThumbnail) {
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
videoPlayer.style.top = `${viewportHeight - videoHeight - 20}px`;
videoPlayer.style.left = `${viewportWidth - videoWidth - 20}px`;
}
});
</script>
</body>
</html>
四、总结与思考
这次我们实现了一个滚动页面时动态调整视频显示位置的小功能。通过 CSS 和 JavaScript 的组合，我们实现了以下目标：
- 自动检测滚动，切换视频展示形式。
- 视频缩略图在右下角悬浮显示，既优雅又实用。
- 支持点击缩略图快速回到主视频位置。
扩展思路：
- 增加一个关闭按钮来隐藏缩略图。
- 实现自适应大小，支持移动端。
赶紧试试吧！如果有问题或更好的建议，欢迎在评论区交流～
