固定导航栏
1、计算导航栏到顶部的距离值
2、当scrollTop值大于这个距离值就添加定位，当小于距离值后解除定位
注意事项：当导航栏添加定位之后，导航栏就脱离了文档流，也就是不占位了，下面的盒子就会顶上来，所以要给下面盒子添加padding-top值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { height: 5000px; } .box1 { height: 40px; background-color: pink; overflow: hidden; } .box2 { height: 50px; background-color: yellow; font: 500 20px/50px "simsun"; text-align: center; } .box3 { width: 820px; height: 512px; margin: 10px auto; } .fixed { position: fixed; width: 100%; top: 0; left: 0; } </style> </head> <body> <div class="box1"></div> <div class="box2">导航栏</div> <div class="box3"> <img src="images/nba.jpg"> </div> <script> var banner = document.getElementsByTagName("div")[0]; var nav = document.getElementsByTagName("div")[1]; var lastDiv = document.getElementsByTagName("div")[2]; window.onscroll = function () { if (scroll().top >= banner.offsetHeight) { nav.className = "box2 fixed"; lastDiv.style.paddingTop = nav.offsetHeight + "px"; } else { nav.className = "box2"; lastDiv.style.paddingTop = "0px"; } } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
两侧跟随广告
1、之前都是offsetLeft计算x轴上的移动，现在是计算y轴方向的移动
2、鼠标滚动之后，遮盖的距离scrollTop值，需要和广告之前的定位Top值进行相加才是滚动的真正目标值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { height: 5000px; } .box1 { width: 800px; margin: 50px auto; font: 500 25px/45px "simsun"; color: red; text-align: center; } span { position: absolute; top: 300px; width: 40px; height: 120px; background: rgba(255, 142, 142, 0.3); font: 600 30px/60px "simsun"; color: red; text-align: center; } .ad-left { left: 400px; } .ad-right { right: 400px; } </style> </head> <body> <span class="ad-left">广<br>告</span> <span class="ad-right">广<br>告</span> <div class="box1"> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> </div> <script> var sp1 = document.getElementsByTagName("span")[0]; var sp2 = document.getElementsByTagName("span")[1]; window.onscroll = function () { animate(sp1, scroll().top + 300); animate(sp2, scroll().top + 300); } function animate(ele, target) { clearInterval(ele.timer); ele.timer = setInterval(function () { var step = (target - ele.offsetTop) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); ele.style.top = ele.offsetTop + step + "px"; if (Math.abs(target - ele.offsetTop) <= Math.abs(step)) { ele.style.top = target + "px"; clearInterval(ele.timer); } }, 15); } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
回到顶部
1、技术点：window.scrollTo(x,y)，之前都是移动某个元素，现在是需要移动整个显示区域，所以用window.scrollTo(x,y)
2、浏览器显示区域已经滚动的距离其实就是scrollTop值，做缓动画，只需要将这个值慢慢变小，一直到0即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { height: 5000px; } .box1 { width: 800px; margin: 50px auto; font: 500 25px/45px "simsun"; color: red; text-align: center; } span { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 120px; background: rgba(255, 142, 142, 0.3); font: 600 30px/30px "simsun"; color: red; text-align: center; display: none; } </style> </head> <body> <span>回<br>到<br>顶<br>部</span> <div class="box1"> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> 锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br> </div> <script> var sp = document.getElementsByTagName("span")[0]; var target = 0;//目标位置 var leader = 0;//显示区域自身的位置 window.onscroll = function () { if (scroll().top > 400) { sp.style.display = "block"; } else { sp.style.display = "none"; } leader = scroll().top; } var timer = null; sp.onclick = function () { clearInterval(timer); timer = setInterval(function () { var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; window.scrollTo(0, leader); if (Math.abs(target - leader) <= Math.abs(step)) { window.scrollTo(0, 0); clearInterval(timer); } }, 15); } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
楼层跨越
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-style: none; } body { height: 5000px; } ul { width: 800px; margin: 0 auto; } ul li { height: 400px; } ol { position: fixed; top: 150px; left: 350px; } ol li { width: 50px; height: 50px; font: 500 15px/50px "simsun"; text-align: center; border: 1px solid #ccc; margin-top: -1px; cursor: pointer; } </style> </head> <body> <ul> <li>上衣</li> <li>下衣</li> <li>春天</li> <li>夏衣</li> <li>秋衣</li> <li>冬衣</li> </ul> <ol> <li>上衣</li> <li>下衣</li> <li>春天</li> <li>夏衣</li> <li>秋衣</li> <li>冬衣</li> </ol> <script> var ul = document.getElementsByTagName("ul")[0]; var uLiArr = ul.children; var ol = document.getElementsByTagName("ol")[0]; var oLiArr = ol.children; var arrColor = ["pink", "blue", "yellow", "orange", "green", "red"]; var timer = null; var dispalyArea = 0;//显示区域坐标 var target = 0;//目标值 for (var i = 0; i < arrColor.length; i++) { uLiArr[i].style.backgroundColor = arrColor[i]; oLiArr[i].style.backgroundColor = arrColor[i]; oLiArr[i].index = uLiArr[i].offsetTop; //显示区域的scrollTop值与目标的scrollTop值差值 oLiArr[i].onclick = function () { target = this.index; clearInterval(timer); timer = setInterval(function () { var step = (target - dispalyArea) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); dispalyArea = dispalyArea + step; window.scrollTo(0, dispalyArea); if (Math.abs(target - dispalyArea) <= Math.abs(step)) { clearInterval(timer); window.scrollTo(0, target); } }, 15); } } window.onscroll = function () { dispalyArea = scroll().top; } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
