測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色
阿新 • • 發佈:2017-07-15
javascript
<!doctype html> <html> <head> <title>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</title> <meta name="author" content="阿耀王子"> </head> <body> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p> <script> setInterval(function () { var scrollTop=document.body.scrollTop; //開始值為0 console.log(scrollTop); // 隨滾動條距離頂部的高度不同,顯示的背景顏色也是不同的 if(scrollTop < 100){ document.body.style.background = "white"; }else if(scrollTop < 200){ document.body.style.background = "red"; }else if(scrollTop < 300){ document.body.style.background = "orange"; }else if(scrollTop < 400){ document.body.style.background = "yellow"; }else if(scrollTop < 500){ document.body.style.background = "green"; }else if(scrollTop < 600){ document.body.style.background = "cyan"; }else if(scrollTop < 700){ document.body.style.background = "blue"; }else if(scrollTop < 800){ document.body.style.background = "purple"; }else{ document.body.style.background = "black"; } },600); </script> </body> </html>
本文出自 “高萬耀” 博客,請務必保留此出處http://gaowanyao.blog.51cto.com/11272977/1947858
測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色