js+css+html实现固定侧边栏效果
- 1 案例描述
- 2 编写HTML代码
- 3 编写CSS代码
- 4 编写JavaScript代码部分
- 5 全部代码
- 6 position:fixed;说明
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 时，容器由视口改为该祖先。
