您所在的位置：首頁 > 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，在滾動的過程中比較這兩個值的大小，當頁面被卷去的高度 >= 黃色塊距離頁面頂部的距離時，黃色塊應該定在窗口頂端，這時應該給黃色塊添加一個固定定位。當條件不滿足時，再將其固定定位取消掉。

代碼為：

<style>

div{

        width: 100%;

        height: 150px;

        background: tomato;

        margin-bottom: 10px;

    }

    #con{

        background: yellow;

    }

    .active{

        position: fixed;

        top:0;

        left: 0;

    }

</style>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div id="con"></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

<script>

    var oCon = document.getElementById('con');

    // 需要先在外面存儲一下這個值，因為加了定位之后會變為獲取到定位父元素的距離，為0

    var offsetT = oCon.offsetTop;

// 當頁面被卷去的高度 >= 紅盒子在頁面中的位置時，紅盒子就定在頂部

// 添加滾動事件

    window.onscroll = function(){

        var scrollH = document.documentElement.scrollTop || document.body.scrollTop;

        if(scrollH >= offsetT){

             oCon.className = 'active';

        }else{

             oCon.className = '';

         }

    }

</script>