下拉网页div自动浮在顶部

最新推荐文章于 2020-11-08 20:54:15 发布

weixin_30576827

最新推荐文章于 2020-11-08 20:54:15 发布

阅读量234

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuan9580/p/10292363.html

版权

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
html, body {
    width:100%;
    margin:0px auto;
    padding:0px auto;
}
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:500px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
   
</style>
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 500){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuan9580/p/10292363.html

weixin_30576827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉网页div自动浮在顶部

<!DOCTYPE html> <html> <head><title></title><style type="text/css">html, body { width:100%; margin:0px auto; padding:0px auto;}.div1 ...
复制链接

扫一扫