固定导航栏 - - php中文网博客

首页 > 博客列表 > 固定导航栏

博主信息

博文 16

粉丝 0

访问量 13449

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

固定导航栏

浅若夏沫

原创

691人浏览过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定导航栏</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #one{
            background:goldenrod;
            height:100px;
            width:500px;
           font-size:20px;
        }
        #two{
            background:rgb(109, 240, 245);
            height:500px;
            width:500px;
            font-size:20px;
        }
        #three{
            background:rgb(247, 157, 194);
            height:500px;
            width:500px;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div id="one">这是顶部</div>
    <div id="two">这是中间</div>
    <div id="three">这是尾部</div>
    <script>
     window.onload = function() {
         var one = document.getElementById('one');
         var two = document.getElementById('two');
         var three = document.getElementById('three');
     window.onscroll=function(){
        if(document.documentElement.scrollTop >= one.offsetHeight ){
                    one.style.cssText="position:fixed;top:0px;";
                    two.style.marginTop = one.offsetHeight+"px";
                }else {
                    one.style.cssText="position:static;";
                    two.style.marginTop ='0px';
                }
            }
     }    
    </script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html基础

2021-11-10 15:24:59