文本部分内容不随着滚动条移动

最新推荐文章于 2021-08-03 22:27:50 发布

张十一

最新推荐文章于 2021-08-03 22:27:50 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_40329367/article/details/80903523

版权

<!DOCTYPE html>
<html>
<head>

   <style type="text/css">
         body{padding:0px;margin:0px;}
         #top{width:100%;height:163px;background-color:red;}
       #nav{width:100%;height:83px;background-color:blue;}
       #main{width:100%;background-color:#fff;text-align:center;padding-left:40px;}
   </style>
   <script type="text/javascript">
        window.οnscrοll=function(){
           //获取top高度
          var top= document.getElementById("top");
          var nav=document.getElementById("nav");
          var main=document.getElementById("main");
          var top_height=top.offsetHeight;//获取top元素高度
          //获取滚动条距上面距离
          //var scrollTop=window.pageYOffset;
                        //document.documentElement.scrollTop;
                       //document.body.scrollTop;
           var scrollTop=0;
           if(window.pageYOffset != null){//IE9+
              scrollTop=window.pageYOffset;
           }else if(document.compatMode === "CSS1Compat"){//标准的浏览器
              scrollTop= document.documentElement.scrollTop;
           }else{//其他
              scrollTop=document.body.scrollTop;
           }

           if(scrollTop>=top_height){
              nav.style.position="fixed";
              nav.style.left="0px";
              nav.style.top="0px";
              main.style.paddingTop="80px";
           }else{
              nav.style.position="";
              nav.style.left="0px";
              nav.style.top="163px";
              main.style.paddingTop="0px";
           }


       }
   </script>
</head>
<body>
       <div id="top">
          <image src="top.png"></image>
       </div>
       <div id="nav">
        <image src="nav.png"></image>

       </div>
       <div id="main">
          <image src="main.png"></image>
       </div>
</body>

</html>