js仿淘宝侧边栏(学习笔记)
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js仿淘宝侧边栏(学习笔记)相关的知识，希望对你有一定的参考价值。
模仿淘宝侧边栏随网页滚动到一定位置开始固定定位
思路：把侧边栏通过绝对定位，外边距固定到一个地方，通过获取盒子的setoffHeight值进行判断是否开启固定定位
<!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>淘宝侧边栏将</title>
<style>
*
box-sizing: border-box;
#header
width: 1000px;
height: 160px;
margin: 10px auto;
background-color: purple;
#banner
width: 1000px;
height: 500px;
margin: 10px auto;
background-color: seagreen;
#navBox
position: absolute;
left: 50%;
top: 300px;
margin-left: 500px;
width: 80px;
height: 200px;
border: 1px solid #333;
padding-top: 150px;
background-color: pink;
#spanText
display: none;
position: absolute;
bottom: 0;
#main
width: 1000px;
height: 1500px;
margin: 10px auto;
background-color: slateblue;
</style>
</head>
<body>
<div id="header"></div>
<div id="banner"></div>
<div id="navBox">
<span id="spanText">返回顶部</span>
</div>
<div id="main"></div>
<script>
//获取元素
var navBox = document.querySelector('#navBox');
var banner = document.querySelector('#banner');
var main = document.querySelector('#main');
var spanText = document.querySelector('#spanText');
var bannerTop = banner.offsetTop;
//获取侧边栏到页面最顶部的距离
var navTop = navBox.offsetTop;
//侧边栏停止后需要给它一个距离，否侧会出现回弹的效果
var stopTop = navTop - bannerTop;
//获取main模块到页面顶部的距离
var mainTop = main.offsetTop;
//页面滚动事件
document.addEventListener('scroll',function()
//window.pageYOffset浏览器页面在Y轴上卷去的距离
if(window.pageYOffset >= bannerTop)
navBox.style.position = 'fixed';
navBox.style.top = stopTop + 'px';
else
navBox.style.position = 'absolute';
//绝对定位，并回到它一开始距离页面顶部的距离
navBox.style.top = navTop + 'px';
//弹出回到顶部的文字
if(window.pageYOffset >= mainTop)
spanText.style.display = 'block';
else
spanText.style.display = 'none';
)
</script>
</body>
</html>
以上是关于js仿淘宝侧边栏(学习笔记)的主要内容，如果未能解决你的问题，请参考以下文章
Web API （scroll系列）（仿淘宝侧边栏效果实现）（mouseenter与mouseover的区别）（动画的原理）（缓动动画）