js检测滚动
记笔记,免忘记!
借鉴网上的
HMTL:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <header> </header> <section style="height: 1500px;background-color: #f0f0f0"> </section> <footer> </footer> </body> </html>
JS:
window.onscroll = function () { var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离 var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度 var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离(总高度) if(a > 0){ document.querySelector('#header').style.top = 0 + 'px'; }else{ document.querySelector('#header').style.top = 36 + 'px'; }; };