聊聊CSS粘性定位sticky案例解析
我要評論背景
最近在做項目遷移，因為技術(shù)不同，導(dǎo)致某些功能的問題需要手動解決；如何在居位在主體區(qū)域底部不隨內(nèi)容而滾動；
OK進入正體這期分享的是CSS粘性定位屬性sticky來解決上面的問題
粘性定位：
粘性定位可以被認(rèn)為是相對定位和固定定位的混合。是 position:sticky是css定位新增屬性；它主要用在對 scroll 事件的監(jiān)聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到 sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當(dāng)于fixed定位，固定到適當(dāng)位置
案例：
我們先來看個案例及最終的效果
實現(xiàn)的代碼
通過一個簡單案例去帶大家粗略了解粘性布局更容易更好理解，東西本身不負(fù)載但存在一些問題需要去進一步了解
問題探索及項目中的坑
- 如果發(fā)現(xiàn)sticky粘性定位失效，如何解決
解決方案： 一般sticky粘性定位失效，我們需要去找他的父元素看他的父親元素是否設(shè)置overflow，一般都以滾動條那個父元素為主
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="aside-warp">
<div>1</div>
<div>2</div>
<div class="icon">圖標(biāo)</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
</div>
</body>
</html>
<style>
body {
height: 2000px;
overflow: auto;
}
.aside-warp {
margin-top: 50px;
height: 700px;
width: 500px;
background-color: aliceblue;
overflow: hidden; //這里是模仿沒有滾動條的效果
}
.aside-warp div {
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid red;
}
.icon {
position: sticky;
top: 0px;
background-color: aquamarine;
}
</style>
如果能解決上面的案例說明對粘性布局了解；
來說明下上面的案例的問題：為什么此時圖標(biāo)就無法粘性定位了，主要是因為它（子元素）不知道以那個父元素的滾動為準(zhǔn)(現(xiàn)在有兩個父級元素都產(chǎn)生了滾動)，所以我們要對一層層祖級元素檢查看是否有overflow屬性如果有將元素設(shè)置 overflow: visible； body {overflow: visible； }； 簡單理解：兩個父級body 和div.main 如果同高度寬度的話，子元素就不知道到底以父元素為主，就會出現(xiàn)無法粘性定位的問題，所以避免這個問題我們要將其中不要定位的父元素設(shè)置{overflow: visible； }； PS：像這種案例非常常見我只是隨機例舉，比如像吸頂啊等等都是可以用粘性定位實現(xiàn)的
到此這篇關(guān)于關(guān)于CSS粘性定位sticky的文章就介紹到這了,更多相關(guān)CSS粘性定位sticky內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下2019-08-26
這篇文章主要介紹了CSS粘性定位 sticky 的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-29
