前端中實現元素sticky特性的兩種方法

時間 2020-05-11

標籤前端實現元素 sticky 特性兩種方法简体版

原文原文鏈接

什麼是sticky？

這裏的sticky，就是粘性定位或者粘性佈局。
不少狀況下，咱們在滾動頁面的過程當中，指望某個元素在滾動到頂部時能夠固定（或懸浮）在該位置，元素position表現爲fixed。css

兩種方法

1、css方法，position：sticky

單詞sticky的中文意思是「粘性的」，position:sticky表現也符合這個粘性的表現。基本上，能夠看出是position:relative和position:fixed的結合體——當元素在屏幕內，表現爲relative，就要滾出顯示器屏幕的時候，表現爲fixed。jquery

示例：web

<style>
    .red{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
</style>
<body style="height: 2000px">
<div style="height: 800px;background-color: blue"></div>
<div class="red" style="height: 200px;background-color: red"></div>
<div style="height: 200px;margin-top:600px;background-color: black"></div>
</body>
複製代碼

運行上段代碼，會出現以下兩張圖的結果。當紅色區塊滑動到頁面頂部後固定在頂部。此時表現爲fixed。ajax

圖1、紅色區塊滑動到頂部時，底部空白 npm

圖2、紅色區塊滑動到頂部後，頁面繼續下滑，出現黑色區塊。紅色區塊此時表現爲fixed。 bootstrap

sticky屬性依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。 sticky屬性僅在如下幾個條件都知足時有效：瀏覽器

父級元素不能有任何overflow:visible之外的overflow設置，不然沒有粘滯效果。由於改變了滾動容器（即便沒有出現滾動條）。所以，若是你的position:sticky無效，看看是否是某一個祖先元素設置了overflow:hidden，移除之便可。

父級元素設置和粘性定位元素等高的固定的height高度值，或者高度計算值和粘性定位元素高度同樣，也沒有粘滯效果。我專門寫了篇文章深刻講解了粘性效果無效的原。

同一個父容器中的sticky元素，若是定位值相等，則會重疊；若是屬於不一樣父元素，且這些父元素正好緊密相連，則會鳩佔鵲巢，擠開原來的元素，造成依次佔位的效果。至於緣由須要理解粘性定位的計算規則。

sticky定位，不只能夠設置top，基於滾動容器上邊緣定位；還能夠設置bottom，也就是相對底部粘滯。若是是水平滾動，也能夠設置left和right值。

這裏有大佬更詳細的講解：www.zhangxinxu.com/wordpress/2…wordpress

2、js方法，利用getBoundingClientRect()和scrollTop()

getBoundingClientRect()方法：它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離。
scrollTop()方法：返回或設置匹配元素的滾動條的垂直位置。當用於返回位置時，該方法返回第一個匹配元素的滾動條的垂直位置；當用於設置位置時，該方法設置全部匹配元素的滾動條的垂直位置。本文使用它返回第一個匹配的滾動條的垂直位置。佈局

示例：this

<head>
<meta charset="UTF-8">
<title>scroll</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
    .scroll_fixed{
        position: fixed;
        top: 0;
    }
</style>
</head>
<body style="height: 2000px">
<div style="height: 1000px;background-color: blue"></div>
<div id="rect" class="scroll" style="width:200px;height: 200px;background-color: red"></div>
<div style="height: 200px;background-color: blueviolet;margin-top:600px"></div>
<script>
$(document).ready(function () {
    let scroll = document.getElementById("rect");
    let top = scroll.getBoundingClientRect().top;
    //on() 添加監聽"所要監聽的事件"，function(){}當監聽到事件後執行的方法
    $(window).on("scroll",function () {
        //this表明window,$(this).scrollTop()返回窗口滾動條的垂直位置，也就是滾動條離頁面頂部的絕對距離。
        if($(this).scrollTop()>top){
            $("#rect").addClass("scroll_fixed");
        }
        else{
            $("#rect").removeClass("scroll_fixed");
        }
    })
})
</script>
</body>
複製代碼

運行上段代碼，監聽頁面的滑動事件，當頁面向下滑動時，窗口滾動條的垂直位置大於紅色區塊相對於視角窗口上方的距離時，調用addClass()方法給該ID爲"rect"的元素(即紅色區塊)添加類scroll_fixed{position: fixed;top:0;}，使得紅色區塊此時固定在頁面頂部。反之，當頁面向上滑動時，窗口滾動條的垂直位置小於紅色區塊相對於視角窗口上方的距離時，調用removeClass()方法移除該元素的類{position: fixed;top:0;}，元素回覆原有position狀態。
結果以下圖：圖1、紅色區塊滑動到頂部時，底部空白

圖2、紅色區塊滑動到頂部後，頁面繼續下滑，出現紫色區塊。紅色區塊此時表現爲fixed。