html网页中吸顶栏效果,HTML+CSS入门 HTML吸顶效果详解

本篇教程介绍了HTML+CSS入门 HTML吸顶效果详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

一、HTML

HTML中需要给div一个id

html>

二、CSS

#head {

background-color: #989898;

width: 100%;

height: 100px;

margin-top: 100px;

}

#head[data-fixed="fixed"]{

position: fixed;

top:0;

left: 0;

margin: 0;

}

三、JS

1、面向过程

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":"")}

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)调用方法

window.onload = function () {

/*获取对象*/

var wrap = document.getElementById("head");

ceiling(wrap) /*调用吸顶函数  */

};

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！