JS 仿淘宝固定右侧侧边栏(可返回顶部)案例

最新推荐文章于 2022-05-31 14:39:54 发布

原创

最新推荐文章于 2022-05-31 14:39:54 发布 · 2.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #html5

本文介绍如何实现网页侧边栏随滚动固定位置，并在页面底部显示返回顶部按钮，点击后通过缓动动画平滑回到页面顶部。

我们先看一下淘宝的侧边栏：
请添加图片描述

功能需求

1.原先侧边栏是绝对定位
2.当页面滚动到一定位置，侧边栏改为固定定位
3.页面继续滚动，会让返回顶部显示出来

比如说这是我们的页面：
在这里插入图片描述
当被页面卷去的部分刚好为header高度时，我们就将右侧侧边栏改为固定定位
当页面滚动到main主体部分时，让侧边栏显示返回顶部字样，点击返回顶部可以通过缓动动画滑到顶部

案例分析：

1.需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document
2.滚动到某个位置，就是判断页面被卷去的上部值。
3.页面被卷去的头部∶可以通过window.pageYOffset获得如果是被卷去的左侧window.pageXOffset
4.注意，元素被卷去的头部是element.scrollTop ,如果是页面被卷去的头部则是window.pageYOffset

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
     
     
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px