position:sticky介紹

用戶的屏幕越來越大，而頁面太寬的話會不宜閱讀，所以絕大部分網站的主體寬度和之前相比沒有太大的變化，於是瀏覽器中就有越來越多的空白區域，所以你可能注意到很多網站開始在滾動的時候讓一部分內容保持可見，比如，側邊欄的部分區域。position:sticky為此而生。

position:sticky用法
position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。

使用起來也非常簡單：

.sticky { 
position: -webkit-sticky; position:sticky; top: 15px; 
}

目前來說還需要用私有前綴～～

sticky生效條件：
1、父元素不能overflow:hidden或者overflow:auto屬性。(mescroll-body設置:sticky="true"即可, mescroll-uni本身沒有設置overflow)
2、必須指定top、bottom、left、right4個值之一，否則只會處於相對定位
3、父元素的高度不能低於sticky元素的高度
4、sticky元素僅在其父元素內生效,所以父元素必須是 mescroll

瀏覽器兼容性：
由於這是一個全新的屬性，以至於到現在都沒有一個規范，W3C也剛剛開始討論它，而現在只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)才開始支持它。

另外需要注意的是，如果同時定義了left和right值，那么left生效，right會無效，同樣，同時定義了top和bottom，top贏～～

fall back
雖然其它瀏覽器尚不支持，但是實現起來其實不難，我們可以用js簡單實現：

HTML

<div class="header"></div>

CSS

.sticky {
    position: fixed;
    top: 0;
}
.header {
    width: 100%;
    background: #f6d565;
    padding: 25px 0;
}

JS

var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);


這里是一個簡單的demo。

嗯，對於前端來說，新技術用於提升用戶體驗才能體現其價值～～

本文轉載，原文來源於：https://www.qianduan.net/position-sticky-introduction/

 

position:sticky介紹

你知不知  2020-09-08 14:48:24    454    收藏  1

分類專欄：  前端必知  文章標簽：  css  js  html5  javascript

版權

前端必知 專欄收錄該內容

63 篇文章 1 訂閱

訂閱專欄

用戶的屏幕越來越大，而頁面太寬的話會不宜閱讀，所以絕大部分網站的主體寬度和之前相比沒有太大的變化，於是瀏覽器中就有越來越多的空白區域，所以你可能注意到很多網站開始在滾動的時候讓一部分內容保持可見，比如，側邊欄的部分區域。position:sticky為此而生。

position:sticky用法

position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。

使用起來也非常簡單：

.sticky { 
position: -webkit-sticky; position:sticky; top: 15px; 
}

目前來說還需要用私有前綴～～

sticky生效條件：

1、父元素不能overflow:hidden或者overflow:auto屬性。(mescroll-body設置:sticky="true"即可, mescroll-uni本身沒有設置overflow)
2、必須指定top、bottom、left、right4個值之一，否則只會處於相對定位
3、父元素的高度不能低於sticky元素的高度
4、sticky元素僅在其父元素內生效,所以父元素必須是 mescroll

瀏覽器兼容性：

由於這是一個全新的屬性，以至於到現在都沒有一個規范，W3C也剛剛開始討論它，而現在只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)才開始支持它。

另外需要注意的是，如果同時定義了left和right值，那么left生效，right會無效，同樣，同時定義了top和bottom，top贏～～

fall back

雖然其它瀏覽器尚不支持，但是實現起來其實不難，我們可以用js簡單實現：

HTML

<div class="header"></div>

CSS

.sticky {
	position: fixed;
	top: 0;
}
.header {
	width: 100%;
	background: #f6d565;
	padding: 25px 0;
}

JS

var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
	window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);

這里是一個簡單的demo。

嗯，對於前端來說，新技術用於提升用戶體驗才能體現其價值～～

本文轉載，原文來源於：https://www.qianduan.net/position-sticky-introduction/