js+css+html实现固定侧边栏效果

1 案例描述

我们在很多网站都看到过，当页面向下滚动时，侧边的导航栏并没有发生位置的改变，而是一直在侧边显示，具体可以参考CSDN个人主页效果，向下翻博客时，左边的导航栏没有发生变动，而且当下拉到一定的程度时，侧面会出现“返回顶部”的标识，点击即可立即回到顶部。本篇博客主要讲述如何实现这个功能。

案例分析：
在这里插入图片描述
当页面在最顶上时，侧边栏的效果如图所示：
在这里插入图片描述
当页面向下滑动一段距离后，侧边栏的位置不会发生改变，而且出现“返回顶部”的字样，点击“返回顶部”，就可以立即回到顶部，效果如下：
在这里插入图片描述

2 编写HTML代码

在HTML页面中，要设计出四块内容，分别是头部区域、Banner区域、主体部分以及侧边栏，在侧边栏中，设计一个span标签来做返回顶部功能，代码如下：

    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体区域</div>
    <div class="slider">
        <span class="goBack">返回顶部</span>
    </div>

注意：头部区域、banner区域、主体区域的div的类名中写入了空格，这表示这些div含有两个类名，分别是空格前面的名字和空格后面的w。

3 编写CSS代码

首先让页面中的头部区域、banner区域和主体区域设置宽度，并且将其居中，上边距设置为10像素，代码如下：

    /* 为头部区域、banner区域、主体区域设置共同的样式 */
    .w {
        /* 宽为页面的70% */
        width: 70%;
        /* 让div在页面居中 */
        margin: 0 auto;
        /* 上边距设置为10像素 */
        margin-top: 10px;
    }

在这里插入图片描述
为头部区域设置单独样式，将其背景色变为红色，高度为100像素，代码如下：

    /* 为头部区域添加单独样式 */
    .header {
        background-color: red;
        height: 100px;
    }

在这里插入图片描述
为banner区域设置单独的样式，将其背景色变为粉色，然后高度设置为200像素，代码如下：

    /* 为banner区域设置单独的样式 */
    .banner {
        background-color: pink;
        height: 200px;
    }

在这里插入图片描述
为主体区域设置单独的样式，将其背景色变为橙色，高度设置为1300像素，代码如下：

    /* 为主体区域设置单独样式 */
    .main {
        background-color: orange;
        height: 1300px;
    }

在这里插入图片描述
接下来设置侧边栏的样式，代码如下：

    /* 设置侧边栏的效果 */
    .slider {
        width: 70px;
        height: 200px;
        background-color: yellow;
        /* 设置绝对定位，将侧边栏固定在页面上的右边区域 */
        position: absolute;
        /* 330像素正好将侧边栏与主体区域的顶部对齐 */
        top: 330px;
        left: 85%;
    }

在这里插入图片描述
为返回顶部的span标签设置样式，将其放在侧边栏最下方，并且先将其隐藏，代码如下：

    /* 为返回顶部的span标签设置样式 */
    .goBack {
        /* 让“返回顶部”文字显示在最下面 */
        position: absolute;
        bottom: 0;
        /* 将其先隐藏 */
        display: none;
    }

在这里插入图片描述
到这里css的部分就结束了，接下来设置JavaScript部分，使其进行动态的变化。

4 编写JavaScript代码部分

在这一部分中，首先获取页面中的元素，代码如下：

//1、获取页面中的div元素（头部区域、banner区域和侧边栏）和goback元素
let header = document.querySelector(".header");
let banner = document.querySelector(".banner");
let slider = document.querySelector(".slider");
let goBack = document.querySelector(".goBack");

接着给页面注册scroll滚动事件，当页面顶部的偏移量大于主体区域距离页面顶部的高度时，将侧边栏的高度固定在页面的顶部，不跟随页面的上下滑动而变化位置，显示返回顶部文字；当页面顶部偏移量小于主体区域距离页面顶部的高度时，侧边栏的位置在主体区域旁边，隐藏返回顶部的按钮。

        //2、给页面注册scroll滚动事件
        document.addEventListener("scroll", function () {
            //（1）获取主体区域距离页面顶部的高度，等于头部区域的高度+banner区域的高度+3个margin-top的高度30
            let mainHeight = header.scrollHeight + banner.scrollHeight + 30;
            //（2）当页面顶部的偏移量大于主体区域距离页面顶部的高度时，
            //将侧边栏的高度固定在页面的顶部，不跟随页面的上下滑动而变化位置，显示返回顶部文字
            if (window.pageYOffset > mainHeight) {
                slider.style.position = "fixed";
                slider.style.top = "0px";
                slider.style.left = "85%";
                goBack.style.display = "block";
            } else {//当页面顶部偏移量小于主体区域距离页面顶部的高度时，侧边栏的位置在主体区域旁边
                goBack.style.display = "none";//隐藏返回顶部的按钮
                slider.style.position = "absolute";
                slider.style.left = "85%";
                slider.style.top = mainHeight + "px";
            }
        })

最后，当点击“返回顶部”时，页面会自动跳转到顶部，所以为“返回顶部”所在的span标签添加一个click事件，代码如下：

        //3、当点击“返回顶部”时，页面迅速跳转到顶部
        goBack.addEventListener("click", function () {
            window.scrollTo(0, 0);
        })

5 全部代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 为头部区域、banner区域、主体区域设置共同的样式 */
    .w {
        /* 宽为页面的70% */
        width: 70%;
        /* 让div在页面居中 */
        margin: 0 auto;
        /* 上边距设置为10像素 */
        margin-top: 10px;
    }

    /* 为头部区域添加单独样式 */
    .header {
        background-color: red;
        height: 100px;
    }

    /* 为banner区域设置单独的样式 */
    .banner {
        background-color: pink;
        height: 200px;
    }

    /* 为主体区域设置单独样式 */
    .main {
        background-color: orange;
        height: 1300px;
    }

    /* 设置侧边栏的效果 */
    .slider {
        width: 70px;
        height: 200px;
        background-color: yellow;
        /* 设置绝对定位，将侧边栏固定在页面上的右边区域 */
        position: absolute;
        /* 330像素正好将侧边栏与主体区域的顶部对齐 */
        top: 330px;
        left: 85%;
    }

    /* 为返回顶部的span标签设置样式 */
    .goBack {
        /* 让“返回顶部”文字显示在最下面 */
        position: absolute;
        bottom: 0;
        /* 将其先隐藏 */
        display: none;
    }
</style>

<body>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体区域</div>
    <div class="slider">
        <span class="goBack">返回顶部</span>
    </div>
    <script>
        //1、获取页面中的div元素（头部区域、banner区域和侧边栏）和goback元素
        let header = document.querySelector(".header");
        let banner = document.querySelector(".banner");
        let slider = document.querySelector(".slider");
        let goBack = document.querySelector(".goBack");
        //2、给页面注册scroll滚动事件
        document.addEventListener("scroll", function () {
            //（1）获取主体区域距离页面顶部的高度，等于头部区域的高度+banner区域的高度+3个margin-top的高度30
            let mainHeight = header.scrollHeight + banner.scrollHeight + 30;
            //（2）当页面顶部的偏移量大于主体区域距离页面顶部的高度时，
            //将侧边栏的高度固定在页面的顶部，不跟随页面的上下滑动而变化位置，显示返回顶部文字
            if (window.pageYOffset > mainHeight) {
                slider.style.position = "fixed";
                slider.style.top = "0px";
                slider.style.left = "85%";
                goBack.style.display = "block";
            } else {//当页面顶部偏移量小于主体区域距离页面顶部的高度时，侧边栏的位置在主体区域旁边
                goBack.style.display = "none";//隐藏返回顶部的按钮
                slider.style.position = "absolute";
                slider.style.left = "85%";
                slider.style.top = mainHeight + "px";
            }
        })
        //3、当点击“返回顶部”时，页面迅速跳转到顶部
        goBack.addEventListener("click", function () {
            window.scrollTo(0, 0);
        })
    </script>
</body>

</html>

6 position:fixed;说明

表示元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

# html # css # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云开源项目Sermant正式成为CNCF官方项目

avatar 华为开发者空间