多種方式實現吸頂效果

仍是前兩天的那個唱歌中間頁，上線前發現滾動時候體驗很差。

由於以前沒有作吸頂效果，搜索內容而後滾下去，沒有找到內容須要再手動劃上來。

方案一：JS 實現

js 無敵大法好。兼容極佳，可是體驗上就比較感人了。這裏不過多介紹。

方案二：Fixed 實現

fixed 是基於瀏覽器的定位，在組件中顯的不是很適用。
並且在 iOS 也有兼容性問題。

方案三：Sticky 實現

sticky 是新加的 position 的值，能夠用於實現粘性定位。
可是顯示上會抖動，demo2

方案四：定高 + calc 實現

demo3，組件接收一個 height 參數，用於設置組件高度，默認值是 100vh，下面放一下僞代碼。

組件盒子{
    max-height: 100vh; 防止傳進來的高度過高。
}
搜索盒子{
    height: 30px;人爲的設置好高度
}
結果盒子{
    height: calc(100% - 30px);經過 calc 來寫死高度
    overflow: scroll;這裏 scroll 和 auto 都是能夠的，不設置的話沒法滑動
}

方案五：absolute + box-sizing 實現

demo4 由於 absolute 是基於第一個非 static 祖先定位，因此咱們可讓搜索盒子基於組件盒子定位，下面僞代碼。

組件盒子{
    max-height: 100vh; 防止傳進來的高度過高。
    position: relative; 讓裏面的absolute基於本身定位
}
搜索盒子{
    height: 30px;人爲的設置好高度
    position: absolute;設置爲相對定位
    top:0;
    width: 100%; 決定定位的話寬度就沒有了，防止漏出地下的內容。
}
結果盒子{
    height: 100%;
    padding-top: 30px; 上面加個展位空白格，防止看不到第一條
    box-sizing: border-box; 修改盒子模型，height = border+padding+content
    overflow: scroll;這裏 scroll 和 auto 都是能夠的，不設置的話沒法滑動
}

還有什麼實現方案？

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。