网页布局与滚动监听技巧-优快云博客

本文详细介绍了如何使用HTML和CSS进行网页布局，并利用JavaScript实现导航栏固定效果及主内容区响应式调整。通过监听页面滚动事件，可以智能地改变导航栏的位置，提升用户体验。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      vertical-align: top;
    }

    .main {
      margin: 0 auto;
      width: 1000px;
      margin-top: 10px;

    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>


  //获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

  //滚动事件
  window.onscroll= function () {
    if(getScroll().top>document.getElementById("topPart").offsetHeight){
      document.getElementById("navBar").className="nav fixed";
      document.getElementById("mainPart").style.marginTop=document.getElementById("navBar").offsetHeight+10+"px";
    }else{
      document.getElementById("navBar").className="nav";
      document.getElementById("mainPart").style.marginTop=10+"px"
    }
  }





</script>
</body>
</html>