Html吸顶效果

一、HTML

HTML中需要给div一个id

 

 

二、CSS

 

三、JS

1、面向过程

 

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