固定導航欄html
一、計算導航欄到頂部的距離值瀏覽器
二、當scrollTop值大於這個距離值就添加定位,當小於距離值後解除定位動畫
注意事項:當導航欄添加定位以後,導航欄就脫離了文檔流,也就是不佔位了,下面的盒子就會頂上來,因此要給下面盒子添加padding-top值this
<!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>
兩側跟隨廣告spa
一、以前都是offsetLeft計算x軸上的移動,如今是計算y軸方向的移動code
二、鼠標滾動以後,遮蓋的距離scrollTop值,須要和廣告以前的定位Top值進行相加纔是滾動的真正目標值htm
<!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>
回到頂部blog
一、技術點:window.scrollTo(x,y),以前都是移動某個元素,如今是須要移動整個顯示區域,因此用window.scrollTo(x,y)ip
二、瀏覽器顯示區域已經滾動的距離其實就是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>