js+css置顶效果、纯css置顶效果
首页 / 图解小知识 | 2022-05-02 17:12:25 点击:0
不多说，直接上DEMO代码：
- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
-
- var timer
- function scrolltop()
- {
- document.getElementById('scrollmenu').style.top=document.documentElement.scrollTop || document.body.scrollTop || 0;
- //兼容写法。页面具有DTD时，使用document.documentElement.scrollTop；没有指定DTD时使用document.body.scrollTop，所以用## || ## || 0 兼容
- timer=setTimeout("scrolltop()",1) //1毫秒调用一次scrolltop()方法
- }
- function stoptimer()
- {
- clearTimeout(timer)
- }
-
-
-
-
-
-
- 置顶菜单
- 导航一
- 导航二
- 导航三
- 导航四
-
-
- 当页面出现滚动条的时候，菜单依然置顶默认为左上角置顶，当为id="scrollmenu"的style添加属性right:0则右上角置顶
-
-
-
另外，纯css也可以实现类似效果（兼容ie浏览器哦o(∩_∩)o ）：
- .fixed{*width:100%; position:fixed; _position:absolute; top:0; _top:expression(eval(document.documentElement.scrollTop)); z-index:10;}/*兼容ie的纯css置顶效果*/
本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。
