Html吸顶效果

2018-03-01 12:26:39来源:cnblogs.com作者:慕容冰菡人点击

分享

一、HTML

HTML中需要给div一个id

<body><div id="head"></div></body>

二、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>

三、JS

1、面向过程

<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>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台