1. <dd id="jcnig"><nav id="jcnig"><delect id="jcnig"></delect></nav></dd>
      <dfn id="jcnig"><tt id="jcnig"><sup id="jcnig"></sup></tt></dfn>

    2. <cite id="jcnig"></cite>
      <cite id="jcnig"><tt id="jcnig"></tt></cite>

      <address id="jcnig"><nav id="jcnig"></nav></address>
    3. <address id="jcnig"><nav id="jcnig"></nav></address>
      400-650-7353

      精品課程

      您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】如何使用js實現固釘效果

      【Web前端基礎知識】如何使用js實現固釘效果

      • 發布: Web前端培訓
      • 來源:Web前端干貨資料
      • 2021-03-22 16:29:11
      • 閱讀()
      • 分享
      • 手機端入口

      當內容區域比較長,需要滾動頁面時,部分內容需要在滾動范圍內的頂部始終展現,這種效果就稱之為固釘。那我們該如何使用js來實現這種結果呢。

      在實現該效果之前,我們需要掌握body位置屬性中offset系列和scroll系列。

      其關系如下圖所示:

      offset系列中常用的屬性為:

      1. 獲取元素的占位寬高

      ① 元素.offsetWidth:獲取元素的占位寬—width+padding+border

      ② 元素.offsetHeight:獲取元素的占位高—height+padding+border

      2. 獲取元素在頁面中的位置

      ① 元素.offsetTop:當前元素的頂部,到定位父元素的距離,沒有定位父元素,到 body 的距離;

      ② 元素.offsetLeft:當前元素的左邊,到定位父元素的距離,沒有定位父元素,到 body 的距離;

      scroll系列中常用的為:

      1. 元素的滾動(當該元素內部出現了滾動條)

      ① 元素.scrollTop:元素被卷去的高;

      ② 元素.scrollLeft:元素被卷去的寬;

      ③ 元素.scrollWidth:獲取元素實際內容寬;

      ④ 元素.scrollHeight:獲取元素實際內容高;

      2. 屏幕的滾動距離:

      document.documentElement.scrollTop:獲取頁面被卷去的高。

      為了兼容ie一般為則需要用 document.body 代替 document.documentElement。

      那之后我們來分析我們要實現的效果,例如在該圖示中黑色矩形代表窗口,紅色矩形代表整個html頁面,在我們滾動頁面時當黃色塊走到窗口頂部時讓其停留在窗口頂部。

      接下來頁面滾動時我們需要知道當前頁面的滾動距離即document.documentElement

      .scrollTop,和黃色塊距離頁面頂部的距離即offsetTop,在滾動的過程中比較這兩個值的大小,當頁面被卷去的高度 >= 黃色塊距離頁面頂部的距離時,黃色塊應該定在窗口頂端,這時應該給黃色塊添加一個固定定位。當條件不滿足時,再將其固定定位取消掉。

      代碼為:

      1. <style> 
      2. div{ 
      3.         width: 100%; 
      4.         height: 150px; 
      5.         background: tomato; 
      6.         margin-bottom: 10px; 
      7.     } 
      8.     #con{ 
      9.         background: yellow; 
      10.     } 
      11.     .active{ 
      12.         position: fixed; 
      13.         top:0; 
      14.         left: 0; 
      15.     } 
      16. </style> 
      17. <body> 
      18.     <div></div> 
      19.     <div></div> 
      20.     <div></div> 
      21.     <div></div> 
      22.     <div id="con"></div> 
      23.     <div></div> 
      24.     <div></div> 
      25.     <div></div> 
      26.     <div></div> 
      27.     <div></div> 
      28.     <div></div> 
      29. </body> 
      30. <script> 
      31.     var oCon = document.getElementById('con'); 
      32.     // 需要先在外面存儲一下這個值,因為加了定位之后會變為獲取到定位父元素的距離,為0 
      33.     var offsetT = oCon.offsetTop; 
      34. // 當頁面被卷去的高度 >= 紅盒子在頁面中的位置時,紅盒子就定在頂部 
      35. // 添加滾動事件 
      36.     window.onscroll = function(){ 
      37.         var scrollH = document.documentElement.scrollTop || document.body.scrollTop; 
      38.         if(scrollH >= offsetT){ 
      39.              oCon.className = 'active'
      40.         }else{ 
      41.              oCon.className = ''
      42.          } 
      43.     } 
      44. </script> 

      需要注意的是:在頁面滾動之前我們要先獲取黃色塊距離頁面頂部的距離,因為offsetTop的值在元素沒有定位的情況下,獲取的才是其在頁面中的位置。當加了固定定位之后該值會為0,之后條件判斷永遠為真,則取消固定定位時無效。

      學習疑問申請解答
      您的姓名
      您的電話
      意向課程
       

      中公優就業

      IT小助手

      掃描上方二維碼添加好友,請備注:599,享學習福利。

      >>本文地址:
      注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

      推薦閱讀

      優就業:ujiuye

      關注中公優就業官方微信

      • 關注微信回復關鍵詞“大禮包”,享學習福利
      QQ交流群
      在線疑問解答
      (加群備注“網站”)
      IT培訓交流群 加入群聊 +
      軟件測試 加入群聊 +
      全鏈路UI/UE設計 加入群聊 +
      Python+人工智能 加入群聊 +
      互聯網營銷 加入群聊 +
      Java開發 加入群聊 +
      PHP開發 加入群聊 +
      VR/AR游戲開發 加入群聊 +
      大前端 加入群聊 +
      大數據 加入群聊 +
      Linux云計算 加入群聊 +
      優就業官方微信
      掃碼回復關鍵詞“大禮包”
      享學習福利

      測一測
      你適合學哪門IT技術?

      1 您的年齡

      2 您的學歷

      3 您更想做哪個方向的工作?

      獲取測試結果
       
      課程資料、活動優惠 領取通道
       
       
      日本一本二本三本av网站,一本加勒比HEZYO东京热高清,一本久久A久久精品综合