• <xmp id="wgksg"><samp id="wgksg"></samp>
  • <blockquote id="wgksg"></blockquote>
  • 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 您更想做哪個方向的工作?

    獲取測試結果
     
    課程資料、活動優惠 領取通道
     
     
    A级毛片毛片免费观看久,A毛看片免费观看视频,毛片曰本女人牲交视频视频