建站
咨詢
售后
建站咨詢
新聞中心
Sticky介紹
Sticky是CSS3的一個(gè)定位屬性，它可以讓元素在滾動(dòng)過程中“粘”在屏幕上的某個(gè)位置，直到滾動(dòng)到某個(gè)臨界點(diǎn)后才會(huì)跟隨滾動(dòng)。Sticky定位可以使得頁面更具交互性和易用性，也提高了頁面的可讀性。 Sticky定位可以通過以下代碼實(shí)現(xiàn)：
按需開發(fā)可以根據(jù)自己的需求進(jìn)行定制，網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義
position: sticky;top: 0;
其中，top屬性定義了元素“粘”在屏幕上的位置。當(dāng)元素到達(dá)指定位置時(shí)，它將會(huì)變成固定定位，直到滾動(dòng)到指定位置后才會(huì)解除固定定位。 Sticky定位的特點(diǎn)：
- 當(dāng)元素被滾動(dòng)到達(dá)指定位置時(shí)，它會(huì)變成固定定位，直到滾動(dòng)到指定位置后才會(huì)解除固定定位。
- Sticky定位可以讓元素在滾動(dòng)過程中保持在屏幕上的某個(gè)位置，這提高了頁面的可讀性和易用性。
- Sticky定位可以和其他定位屬性（如top、bottom、left、right）結(jié)合使用，從而實(shí)現(xiàn)更加復(fù)雜的布局效果。
實(shí)現(xiàn)一個(gè)高度能自動(dòng)變小的吸附需求
場(chǎng)景：客戶需要這樣一個(gè)動(dòng)態(tài)效果，就是網(wǎng)站的頂部導(dǎo)航欄在未觸及到頁面頂部時(shí)，它的高度為 100px ，隨著頁面向下滾動(dòng)，頂部導(dǎo)航欄在觸及頁面頂部時(shí)，保持在頁面頂部顯示，當(dāng)頁面繼續(xù)向下滾動(dòng)時(shí)，頂部導(dǎo)航欄導(dǎo)航欄隨滾動(dòng)減少高度，直到高度減少到50px時(shí)不再繼續(xù)減少。在以前：我們基本使用js來實(shí)現(xiàn)此效果，基本原理就是監(jiān)聽滾動(dòng)條，計(jì)算滾動(dòng)距離，動(dòng)態(tài)賦值高度和樣式。在現(xiàn)在：我們直接使用 position: sticky; 即可實(shí)現(xiàn)此效果：
這是吸附
.header {
position: sticky;
top: -50px;
width: 100%;
height: 100px;
background-color: #f0f;
}
.header2 {
position: sticky;
top: 0;
background-color: rgba(25,25,25,.5);
height: 50px;
}是不是很簡(jiǎn)單就能實(shí)現(xiàn)此效果啦，相比js一大堆邏輯代碼， position: sticky; 可簡(jiǎn)潔的不是一點(diǎn)兩點(diǎn)啦。
兼容性
可見，對(duì)現(xiàn)代瀏覽器，兼容還是不錯(cuò)噠，當(dāng)然老項(xiàng)目ie瀏覽器還是只有乖乖的寫js啦。
當(dāng)前題目：Web前端tips：CSS之Sticky粘滯效果
本文來源：http://fisionsoft.com.cn/article/djsheii.html
