侧边栏跟着滚动条向下或向上，延迟滚动_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

侧边栏跟着滚动条向下或向上，延迟滚动

来源：未知作者：类型：文章教程点击次数：发布时间：2017-03-17 15:21:55

当滚动条开始滚动一段距离停下的时候，侧边栏才缓缓的滚动过来。类似于position:fixed，但是和position:fixed又不太一样。这是我爱模板网的客户要求，随手写的一个效果。用的是position:absolute绝对定位写的。动画效果，由于客户没有要求兼容性，就偷懒用了css3写了。运行下面的代码查看效果：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>侧边栏跟着滚动条向下或向上，延迟滚动 - 我爱模板网 www.5imoban.net</title> <style> div{width:100px; background:linear-gradient(#FFAA00,#FF0000); height:400px; position:absolute; left:10px; transition:all 1000ms;} </style> </head> <body style="height:5000px;"> <div id="myDiv"></div> <script> var oDiv = document.getElementById("myDiv"); var scrollPos; oDiv.style.top = "100px"; document.getElementsByTagName("body")[0].onscroll = function(){ if (document.compatMode && document.compatMode != 'BackCompat'){ scrollPos = document.documentElement.scrollTop; }else if (document.body) { scrollPos = document.body.scrollTop; } oDiv.style.top = scrollPos + 100 + "px"; }; </script> </body> </html>
提示：您可以先修改部分代码再运行