position:sticky;新屬性小記
阿新 • • 發佈：2018-11-07
偶然得知了position:sticky這個新屬性，想起了從前寫這個功能時的蛋疼時光。。。一堆高度算來算去，比來比去，emmm。。。
position:sticky；基於使用者的滾動位置來定位。
粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換。
在目標區域以內，它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
下附demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位的新屬性position:sticky;</title> <style type="text/css"> .top { height: 500px; background: yellowgreen; } .pos { height: 100px; background: blue; position: -webkit-sticky; position: sticky; top: 0; /*閾值*/ } .pos22 { height: 100px; background: yellow; position: -webkit-sticky; position: sticky; top: 100px; /*閾值*/ } .bottom1 { height: 500px; background: grey; } .bottom { height: 1600px; background: grey; } </style> </head> <body> <div class="top">上邊元素</div> <div class="pos">定位元素</div> <div class="bottom1">底部元素</div> <div class="pos22">定位元素222</div> <div class="bottom">底部元素</div> <script src="../lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('.pos22').click(function() { window.scrollTo(0, 1500) }) </script> </body> </html>