为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 如何轻松实现网页中的右侧跟随效果

如何轻松实现网页中的右侧跟随效果

标签：
Html/CSS CSS3 动效动画
概述

右侧跟随效果是一种网页设计技术，用于使特定元素如侧边栏、广告和导航栏在用户滚动页面时始终保持在可视区域的右侧。这种效果提升了用户体验，使得导航菜单、广告和即时聊天窗口等重要信息始终可见。文章详细介绍了右侧跟随效果的应用场景、准备工作、实现步骤和最佳实践，帮助开发者更好地利用这一技术。

指定大纲内容
什么是右侧跟随效果

右侧跟随效果的定义

右侧跟随效果是一种网页设计技术，用于使特定元素（如侧边栏、广告、导航栏等）在用户滚动页面时，始终保持在可视区域的右侧。这种效果提升用户体验，使得用户在浏览网页时，能够时刻看到需要的重要信息，如导航菜单、社交媒体链接或即时聊天窗口等。

右侧跟随效果的作用和应用场景

  1. 导航栏跟随：在长网页中，导航栏可能会随着滚动而消失，通过右侧跟随效果，可以确保导航栏始终可见，方便用户快速返回顶部或跳转到网页的不同部分。
  2. 广告展示：侧边栏广告跟随技术能够确保广告始终出现在用户视野中，增加广告的曝光率，提升广告效果。
  3. 即时聊天窗口：在网站支持即时聊天时，通常会有一个聊天窗口在侧边栏中，用以方便用户随时与客服沟通，此效果需要确保聊天窗口不因页面滚动而消失。
  4. 工具栏：例如，在在线文档编辑器中，用户工具栏需要在用户编辑内容时始终保持可见，方便用户快速访问各种编辑功能。
准备工作

确定要跟随的内容

在实现右侧跟随效果之前，首先需要确定需要跟随的元素。通常情况下，侧边栏是最常用的选择，但也可以是其他任何你想要固定位置的元素。确定元素类型后，需要考虑其内容和样式设计。例如，导航栏通常包含链接，而广告可能包含图片和链接等。

准备必要的HTML和CSS代码

在开始编写代码之前，需要准备一些基础的HTML和CSS代码。这些代码用于创建网页的结构和样式，为后续的JavaScript功能提供基础。

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右侧跟随效果示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content">
        <h1>欢迎来到右侧跟随效果示例页面</h1>
        <p>这是一段很长的内容，用于展示右侧跟随效果。</p>
        <p>这段内容用来模拟长页面。</p>
        <p>更多内容...</p>
        <p>更多内容...</p>
        <p>更多内容...</p>
    </div>
    <div id="sidebar">
        <h3>导航</h3>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>
</body>
</html>

CSS代码

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#content {
    margin-right: 230px; /* 为侧边栏留出空间 */
    padding: 20px;
}

#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    padding: 20px;
    border-left: 1px solid #ccc;
}

#sidebar h3 {
    margin-bottom: 10px;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
}

#sidebar li {
    margin-bottom: 10px;
}

#sidebar a {
    text-decoration: none;
    color: #333;
}
编写基础HTML代码

创建基本的HTML结构

在编写基础HTML代码时，需要创建一个包含主要内容的<div>元素，以及一个用于跟随效果的侧边栏<div>元素。侧边栏将包含导航链接或其他想要始终保持可见的信息。

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右侧跟随效果示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content">
        <h1>欢迎来到右侧跟随效果示例页面</h1>
        <p>这是一段很长的内容，用于展示右侧跟随效果。</p>
        <!-- 更多内容... -->
    </div>
    <div id="sidebar">
        <h3>导航</h3>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

添加需要跟随的元素

确保在HTML代码中正确设置需要跟随的元素。在这个例子中，我们为侧边栏添加了导航链接。注意，侧边栏的HTML结构必须包含在<div id="sidebar">标签内。

HTML代码

<div id="sidebar">
    <h3>导航</h3>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
添加CSS样式

设计跟随元素的初始样式

在CSS中设置侧边栏的初始样式。这包括固定位置、宽度、背景颜色等。确保侧边栏不会随着页面滚动而移动，而是始终保持在页面右侧。

CSS代码

#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    padding: 20px;
    border-left: 1px solid #ccc;
}

#sidebar h3 {
    margin-bottom: 10px;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
}

#sidebar li {
    margin-bottom: 10px;
}

#sidebar a {
    text-decoration: none;
    color: #333;
}

设置跟随元素的位置和动画效果

为了使侧边栏在页面滚动时保持固定位置，我们还需要设置一些CSS属性，如position: fixed。此外，为了使侧边栏看起来更平滑和专业，可以添加一些简单的动画效果，如过渡效果。

CSS代码

#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    padding: 20px;
    border-left: 1px solid #ccc;
    transition: transform 0.3s ease;
}

#sidebar h3 {
    margin-bottom: 10px;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
}

#sidebar li {
    margin-bottom: 10px;
}

#sidebar a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}
使用JavaScript实现跟随效果

引入jQuery库（可选）

虽然可以使用纯JavaScript实现跟随效果，但引入jQuery库可以简化代码和提高开发效率。jQuery库提供了许多方便的函数和方法，能够简化DOM操作和事件处理。

HTML代码

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>

编写JavaScript代码实现跟随功能

使用JavaScript或jQuery编写代码以实现跟随功能。代码需要监听窗口的滚动事件，然后根据滚动位置调整侧边栏的位置。以下是一个简单的示例，使用jQuery实现跟随效果。

JavaScript代码

$(document).ready(function() {
    $(window).scroll(function() {
        var height = $(window).scrollTop();
        $('#sidebar').css('top', height + 'px');
    });
});

调试和测试跟随效果

在开发过程中，调试和测试是非常重要的步骤。可以通过Chrome开发者工具或其他浏览器的调试工具来检查代码的运行情况。确保所有功能正常工作，跟随效果平滑且无卡顿。

测试步骤

  1. 打开浏览器，访问包含右侧跟随效果的网页。
  2. 使用滚动条或鼠标滚轮尝试滚动页面。
  3. 检查侧边栏是否随着页面滚动而固定在右侧。
  4. 如果发现问题，使用浏览器的开发者工具进行调试。
最佳实践和常见问题

如何优化跟随效果的性能

为了优化跟随效果的性能，可以采取以下措施：

  1. 减少DOM操作：避免在滚动事件中频繁地更新DOM元素的位置。可以考虑缓存某些值或使用CSS动画替代JavaScript动画。
  2. 避免过度使用事件监听器：只在需要时添加事件监听器，并确保在不再需要时移除它们。
  3. 优化CSS选择器：确保CSS选择器的性能。尽可能使用ID选择器而不是类选择器或标签选择器。
  4. 避免不必要的计算：例如，可以缓存滚动高度的计算结果，而不是每次滚动都重新计算。
  5. 使用CSS变量：CSS变量可以提供一种方便的方式来管理样式中的复用值，从而简化CSS代码。

示例代码

$(document).ready(function() {
    let lastScrollTop = 0;
    $(window).scroll(function() {
        let st = $(this).scrollTop();
        if (st > lastScrollTop) {
            $('#sidebar').css('top', st + 'px');
        }
        lastScrollTop = st;
    });
});

常见问题及解决方法

问题1：跟随效果在滚动时卡顿

解决方法：减少不必要的计算和DOM操作。例如，可以缓存一些值，如窗口的滚动高度，以便在每次滚动时不需要重新计算。

问题2：跟随元素被其他元素挡住

解决方法：可以通过CSS的z-index属性来提高跟随元素的层级。确保跟随元素的z-index值高于其他元素。

问题3：跟随元素在某些浏览器中不兼容

解决方法：使用浏览器兼容性检查工具，如Can I Use，来确保代码在目标浏览器中正常运行。同时，可以使用现代浏览器的特性，对于不支持的浏览器，提供降级方案。

问题4：跟随元素在移动端上效果不佳

解决方法：确保在移动端上也测试跟随效果。可以使用媒体查询在不同设备上优化CSS样式。对于移动端，可以调整跟随元素的大小和位置，以适应较小的屏幕。

示例代码

@media (max-width: 768px) {
    #sidebar {
        width: 100%;
        right: 0;
        top: 0;
    }
}

问题5：跟随元素与页面内容重叠

解决方法：可以通过CSS的position属性和margin属性来调整跟随元素的位置。确保跟随元素与页面内容之间有足够的空间，避免内容重叠。

示例代码

#sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    padding: 20px;
    border-left: 1px solid #ccc;
    margin-top: 20px; /* 调整跟随元素的位置 */
}
点击查看更多内容
发表于 2024.11.11 12:27， 共 36 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

汪汪一只猫

手记
篇
粉丝
129
获赞与收藏
718

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消