js仿淘宝侧边栏滚动条
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js仿淘宝侧边栏滚动条相关的知识，希望对你有一定的参考价值。
利用缓动动画函数实现
<body>
<div id="header"></div>
<div id="banner"></div>
<div id="navBox">
<span id="goBack">返回顶部</span>
</div>
<div id="main"></div>
<script>
//获取元素
var navBox = document.querySelector('#navBox');
var banner = document.querySelector('#banner');
var main = document.querySelector('#main');
var goBack = document.querySelector('#goBack');
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)
goBack.style.display = 'block';
else
goBack.style.display = 'none';
)
//给goBack返回顶部注册一个点击事件
goBack.addEventListener('click',function()
antimer(window,0);
)
//给动画函数增加一个回调函数
function antimer(obj,distance,callback)
//避免多个元素拥有定时器时引起歧义 节省内存空间 var timer改成obj的一个属性
//在每次执行定时器函数的时，清除上一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function()
//设置缓动动画 公式：目标距离 - 现在的距离 / 10;
//给步长取整 当step大于0的时候向上取整，负数的时候向下取整
var step = (distance - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(window.pageYOffset == distance)
clearInterval(obj.timer);
//函数执行完的标记，再判断是否有回调函数
if(callback)
callback();
// obj.style.left = obj.offsetLeft + step +'px';
window.scroll(0,window.pageYOffset + step);
,15);
</script>
</body>
以上是关于js仿淘宝侧边栏滚动条的主要内容，如果未能解决你的问题，请参考以下文章
Web API （scroll系列）（仿淘宝侧边栏效果实现）（mouseenter与mouseover的区别）（动画的原理）（缓动动画）