position:sticky是真的棒,牛批!!!

介紹什麼的也就不多說了。張鑫旭大神已經介紹的非常清楚了。
地址:position:sticky介紹

這裏就上幾張圖片(gif太不好製作了),對比一下使用fixed和sticky的區別。

在這裏插入圖片描述
在這裏插入圖片描述

	position: fixed;
    top: 80px;
    right: 15px;
    width: 32%;

通過fixed固定的,無論頁面怎麼滾動距離都不會變,頁面滾動之後留下不舒服的大空隙
在這裏插入圖片描述

在這裏插入圖片描述

	position: sticky;
    top: 0;
    right: 15px;
    width: 32%;

通過sticky設置之後,頁面開始正常佈局,當頁面開始滾動之後,就會根據設置的top值,進行設定

各位如果看到這裏,真的希望您親自試試,我反正感覺有了這個東西,彷彿打開了新世界的大門,這玩意這麼6,CSS就能搞定的事兒,何必使用js來實現。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章