Html吸顶效果一、HTML

HTML中需要给div一个id

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><div id="head"></div></body></html>二、CSS

<style> #head { background-color: #989898; width: 100%; height: 100px; margin-top: 100px; } #head[data-fixed="fixed"]{ position: fixed; top:0; left: 0; margin: 0; } </style> web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）三、JS1、面向过程

<script> var obj = document.getElementById("head"); var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; obj.setAttribute("data-fixed",st >= ot?"fixed":"")}</script>2、面向对象1）封装方法

/* * 封装吸顶函数，需结合css实现。 * 也可以直接用js改变样式，可以自行修改。 */ function ceiling(obj) { var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; obj.setAttribute("data-fixed",st >= ot?"fixed":""); } }2）调用方法

<script src="ceiling.js"></script><script> window.onload = function () { /*获取对象*/ var wrap = document.getElementById("head"); ceiling(wrap) /*调用吸顶函数 */ };</script>web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）