JavaScript三大家族(offset、scroll、client)；用offset、scroll完成导航栏吸顶案例

煎饼狗子

已于 2024-08-19 23:54:19 修改

阅读量280

点赞数 8

文章标签： javascript 前端 html css

于 2024-08-19 23:52:11 首次发布

本文链接：https://blog.csdn.net/weixin_53832924/article/details/141336116

版权

1.简单看懂offset、scroll，client

1.1 offset

offset翻译过来就是偏移量，表示元素的偏移量。
offset属性家族：获取元素真实的宽高和位置

offsetHeight

元素盒子模型的高：height + padding+border

offsetWidth

元素盒子模型的宽：width + padding+border

offsetLeft

获取自己左外边框与offsetParent（距离它最近的相对父级（定位元素））的左内边框的距离

offsetTop

获取自己上外边框与offsetParent（距离它最近的相对父级（定位元素））的上内边框的距离
如果offsetLeft和offsetTop没有相对父级元素，默认指向body

offsetParent和parentNode

offsetParent 指的是最近的一个相对父级元素（默认指向body）
parentNode 就是直接父级（标签结构中的父子关系）

1.2 scroll

scroll表示浏览器滚动时元素的卷曲值，讨论的是网页整体与浏览器之间的关系。

scrollHeight和scrollWidth

代表获容器内部可滚动的高度和宽度（height/width + padding）
包括由于溢出而无法展示在网页的不可见部分

scrollTop和scrollLeft

相对父盒子，元素向上/向左卷曲出去（滚出去）的距离

滚动事件

scroll事件是在window对象上发生的，它表示的是页面中相应元素的变化。

1.3 client

client获取的是元素的可视区域

clientWidth和clientHeight

不包含border在内的实际宽度（width/height + padding）

clientLeft和clientTop

打印出盒子左侧边框/顶部边框的厚度
几乎不用

2.offset、scroll实现导航栏吸顶

html和css样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航栏吸顶案例</title>
   <style>
      /* 导航条 CSS样式 */
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-family: "微软雅黑";
      }

      #navbar {
        width: 100%;
        height: 50px;
        background: rgb(57, 93, 165);
      }
      #navbar ul {
        background: rgb(57, 93, 165);
        width: 1500px;
        margin: 0 auto; /* 水平居中 */
      }
      #navbar ul li {
        width: 150px;
        height: 50px;
        padding-left: 0;
        display: inline-block;
        text-align: center;
        font-weight: bold;
      }
      #navbar ul li a {
        text-decoration: none;
        color: #fff;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
      }
      #navbar > ul > li {
        float: left;
      }
      #navbar a:hover {
        /* 设置鼠标悬停时的样式*/
        text-decoration: underline;
        color: orange;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <header id="hea">
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
      <h3>这是轮播图</h3>
    </header>
    <nav id="navbar">
      <ul>
        <li><a href="#">学校概况</a></li>
        <li><a href="#">院系机构</a></li>
        <li><a href="#">师资队伍置</a></li>
        <li><a href="#">教育教学</a></li>
        <li><a href="#">科学研究</a></li>
        <li><a href="#">交流合作</a></li>
        <li><a href="#">招生与就业</a></li>
        <li><a href="#">校园生活</a></li>
        <li><a href="#">合规建设</a></li>
        <li><a href="#">角色入口</a></li>
      </ul>
    </nav>
    <div id="mainBox">
      <p>这是正文示例1</p>
      <p>这是正文示例2</p>
      <p>这是正文示例3</p>
      <p>这是正文示例4</p>
      <p>这是正文示例5</p>
      <p>这是正文示例6</p>
      <p>这是正文示例7</p>
      <p>这是正文示例8</p>
      <p>这是正文示例9</p>
      <p>这是正文示例10</p>
      <p>这是正文示例11</p>
      <p>这是正文示例12</p>
      <p>这是正文示例13</p>
      <p>这是正文示例14</p>
      <p>这是正文示例15</p>
      <p>这是正文示例16</p>
      <p>这是正文示例17</p>
      <p>这是正文示例18</p>
      <p>这是正文示例19</p>
      <p>这是正文示例20</p>
      <p>这是正文示例21</p>
      <p>这是正文示例22</p>
      <p>这是正文示例23</p>
      <p>这是正文示例24</p>
      <p>这是正文示例25</p>
      <p>这是正文示例26</p>
      <p>这是正文示例27</p>
      <p>这是正文示例28</p>
      <p>这是正文示例29</p>
      <p>这是正文示例30</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
      <p>这是正文示例...</p>
    </div>

    
  </body>
</html>

javascript代码

  //功能一:鼠标向下滚动到一定位置，导航栏navbar实现吸顶；
  //功能二:鼠标回滚到最初的位置，导航栏navbar取消吸顶；

      //1.获取导航栏navbar的初始偏移量，即获取navbar的Y坐标
      var _navBar = document.getElementById("navbar");
      var _navTop = _navBar.offsetTop;

      //2.页面window做滚动事件scroll
      window.onscroll = function () {

        //3.获取页面window卷曲的距离，即文档滚出的距离
        var winTop = document.documentElement.scrollTop;
        //4.吸顶效果
        //每当滚动的时候都需要获取超出窗口的范围，然后和navbar的Y坐标做对比
        //如果滚动的距离大于等于navbar的Y坐标，就设置成固定定位，否则去掉navbar定位
        if (winTop >= _navTop) {
          //吸顶
          _navBar.style.position = "fixed";
          _navBar.style.top = 0;
        } else {
          //取消吸顶
          _navBar.style.position = "static";
        }
      };

煎饼狗子

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript三大家族(offset、scroll、client)；用offset、scroll完成导航栏吸顶案例

不包含border在内的实际宽度（width/height + padding）scroll表示浏览器滚动时元素的卷曲值，讨论的是网页整体与浏览器之间的关系。相对父盒子，元素向上/向左卷曲出去（滚出去）的距离。上发生的，它表示的是页面中相应元素的变化。打印出盒子左侧边框/顶部边框的厚度。client获取的是元素的可视区域。javascript代码。scroll事件是在。html和css样式。
复制链接

扫一扫