JavaScript网页–仿淘宝右侧边栏 在浏览一些网页时，经常会出现右侧边栏，在右侧边栏会有一些比较方便的链接，例如淘宝
文章图片
【javascript|JavaScript网页--仿淘宝右侧边栏】淘宝的右侧边栏有品质好货，好点直播等链接，在页面向下滚动时，品质好货的上端顶到页面上端时，侧边栏固定，在往下滑，到一定距离后，出现返回顶部的链接。
文章图片
实现了简单的功能（忽略丑陋的页面）
文章图片
程序实现如下：
仿淘宝右侧侧边栏 - 锐客网 >
* {
margin: 0px;
padding: 0px;
}
.bd {
width: 1450px;
height: 5000px;
margin: auto;
background-color: pink;
}
.slider-bar{
position: absolute;
width: 50px;
left: 50%;
margin-left: 730px;
top: 700px;
}
.right {
width: 50px;
height: 50px;
font-size: 20px;
background-color: cadetblue;
}
.goback {
display: none;
width: 50px;
height: 50px;
font-size: 20px;
background-color: cadetblue;
}
品质好货
好店直播
返回顶部
推荐阅读
- 学习记录JavaScript|JavaScript(元素偏移,滚动,可视区系列。淘宝右侧固定栏案例，mouseover与mouseenter的区别)
- 从零开始学WEB前端|从零开始学WEB前端——网页的行为——JavaScript基础（1）
- JavaWEB|javaWEB六（Servlet 之 其它相关问题）
- GIS相关|Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容
- JavaWeb|HTML 基础
- ajax|掌握 Ajax，第 4 部分: 利用 DOM 进行 Web 响应
- 掌握AJAX|掌握 Ajax，第 4 部分: 利用 DOM 进行 Web 响应 将 HTML 转换为对象模型
- JavaScript学习笔记|JavaScript学习笔记——函数 Part1（函数的创建原理（函数声明、函数表达式、函数在何时被创建））
- JavaScript|JavaScript第二个分水岭——对象