sticky粘性布局,position sticky定位无效

　　背景：定位：粘性也叫粘性定位。粘性定位的元素依赖于用户的滚动，并在位置：相对和位置：固定定位之间切换。根据正常的文档流定位元素，然后根据top、right、bottom和left的值相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移，包括与表格相关的元素。

　　粘性可以认为是相对定位和固定定位的混合。元素在越过某个阈值之前被相对定位，然后被固定。例如：

　　#one {位置：粘性；top:10px；}设置以上样式的元素，在视口滚动到元素顶部不到10px之前，元素相对定位。之后，元素将固定在距离顶部10px的位置，直到视口回滚到阈值以下。

　　注意：

　　元素的定位表现为越过某个阈值前的相对定位，然后是固定定位。必须指定顶部、右侧、底部或左侧这四个阈值中的一个，以使粘性定位有效。否则，其行为与相对定位相同。偏移值不影响任何其他元素的位置。该值总是创建新的堆叠上下文。粘性元素将通过滚动机制固定到其最近的祖先(当该祖先的溢出被隐藏、滚动、自动或覆盖时)，即使该祖先不是最近的真实可滚动祖先。

应用示例

1. 基础：头部固定

　　开始时，头部的导航栏相对定位在顶部，当页面元素滚动时，就变成了类似固定的固定位置。

　　main class= main-container header class= main-header header/header div class= main-CONTENT 主内容/div页脚class=main-footer 页脚/页脚/main . main-container { max-width:500 px；高度：500px边距：0自动；边距-顶部：40px溢出：自动；}.主容器* * { margin-top:20px；}.主标题{高度：50px}.主要内容{最小高度：600像素；}.main-header { position:-WebKit-sticky；位置：粘性；top:0；}

2. 基础：页脚固定

　　页脚固定效果，这也是一开始的固定定位效果。当页面滚动到页脚以外时，页脚定位效果就变成了相对定位效果，可以用来显示一些底层信息或者广告。

　　main class= main-container header class= main-header header/header div class= main-CONTENT 主内容/div页脚class=main-footer 页脚/页脚/main div class= devide /div . main-container * * { margin-top:20px；}.主标题{高度：50px}.主要内容{最小高度：600像素；}.main-footer { position:-WebKit-sticky；位置：粘性；底部：0；边框颜色：红色；}.devide { height:600 px；}

3. 基础：侧边栏固定

　　当页面滚动且位置超过侧边栏的顶部阈值时，侧边栏成为固定位置，可用于实现侧边导航栏或侧边提示信息和广告显示。

　　div class=" scroll " div class= wrapper cf div class= content h1向下滚动！/h1居民morbi tristique senese和感谢和malesuada fames ac turpis egestas .这是一个很好的例子.欧盟自由贸易协定将永远生效。我的简历上写着。毛里斯普莱瑟拉特100元/人你最好坐下来，不要肥胖。除此之外，我们还将在实验室里发现新的志愿者。伊普森，伊洛！/p/div div class= sidebar H3 sidebar/H3最重要的是洞察力./p /div /div/div.cf:之前，cf:后{内容： ;显示：表格；明确：两者都有；}.cf { * zoom:1；}.卷轴{高度：500像素溢出：滚动；填充：0 10px最大宽度：500像素；边距：40px自动；背景：# FFFFFF}。content { padding:0 15px；宽度：280px}。侧边栏{填充：20px宽度：170像素背景：# 2d 2d颜色：# FFFFFF}。内容，侧栏{ float:左；}.侧边栏{ position:-WebKit-sticky；位置：粘性；top:15px；}

4. 基础：列表锚点

　　 仅使用钢性铸铁就可实现页面滚动锚点固定效果，可用于实现通讯录滚动、日志记录滚动、其他分类列表滚动效果。

　　div class= container div class= list div class= list-group div class= list-header a/div div class= list-content dipple/div divard vark/div divAnt/div divAcorn/div/div！-.-div class= list-group div class= list-header d/div div class= list-content div dog/div div date/div div Danish/div div dandelion/div/div/div @支持CSS at-rule您可以指定依赖于浏览器中的一个或多个特定的半铸钢钢性铸铁(铸造半钢)功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。

　　@supports (position: sticky) { .列表头{位置：sticky top:0；}}.容器{宽度：500像素高度：500像素边距：40px自动；位置：相对；溢出：自动；}.列表{最小高度：1600像素背景：# FFFFFF}。列表内容{ padding:10px 20px；}.list-header { padding:10px；背景：# 2d 2d颜色：# FFFFFF位置：相对；字体粗细：粗体；}

5. 进阶：表格表头固定

　　 对桌子元素的泰国(泰国)或tr设置位置：粘性；可以实现表格头部或某行固定，也可将多个表格合并到一起，当滚动到当前表格是，固定头部自动变为当前表格的表头。

　　名称/数量/工作/颜色/时间/日期/时间/日期/时间/日期/时间/日期/时间表./td tdUllam ./TD t旅行./td tdAt ./td tdQuis ./td /tr！-.-tr class= green th name/th thAge/th job/th color/th thur/th/tr！-.-/tbody/table/div。容器{高度：500 px宽度：适合-内容；边距：40px自动；x溢出：自动；} table { text-align:left；位置：相对；边框-塌陷：塌陷；}th，TD { padding:0.25雷姆；} tr:n-child(偶数){背景：# EFE fef}tr.red th {背景：# dd4a63颜色：白色；} tr。绿色th {背景：# 03c 03c颜色：白色；} tr。蓝色th {背景：# 1580 D8颜色：白色；}th {背景：白色；位置：粘性；top:0；}

6. 进阶：页面进度条（简易）

　　 利用位置：粘性；定位，可以实现页面浏览进度条效果，以下是简易进度条的演示，实际实现中可将未滚动到顶部的元素设置为透明色，滚动到顶部时变为蓝色。

　　div class= container h1 sticky Progress/h1 div class= sticky /div plo rem ipsum dolor sit amet conspected your adipsing elit .Voluptatem，cumque？第一，它明确地解释了根据当时的情况，根据类似的过失，根据同样的法律。好的，我们很快就能到达100/p！-.-div class= sticky /div plo rem ipsum dolor Sita amet consided you adipping elit .Voluptatem，cumque？第一，它明确地解释了根据当时的情况，根据类似的过失，根据同样的法律。好的，我们很快就能到达100/p/div。容器{宽度：500 px高度：500像素溢出：自动；边距：40像素自动40像素填充-底部：500像素；框大小：边框-框；}.粘性{宽度：50px高度：10px背景：rgba(36，167，254，0.979)；位置：-WebKit-sticky；位置：粘性；top:0；}.sticky:n-of-type(2){ transform:translate x(50px)；}.sticky:n-of-type(3){ transform:translate x(100px)；}.粘性：第n个类型(4) {//.stick:n-of-type(10){ transform:translate x(450 px)；}

7. 进阶：页面进度条（优化）

　　 优化版的进度条支持浏览进度百分比显示，助于提升用户体验。

　　文章分类class=文章标题 h1页面进度条示例/h1 div class= Progress-wrapper div class= Progress-label /div Progress/Progress/div/div img src= /PEM从密码笔资产中随机提供的所有图像。officeipsum.com提供的所有银文本，/em/p p正面时间级别游戏字段突出显示。在速赢标杆里烤，或者双面划水。重新发明轮子。如果你被这个职位聘用，你觉得你会带来什么？从消防水管里喝水，但是季度销售处于历史最低点，或者你能为我大概估计一下单位成本吗？我们的跑道快用完了100/p！-.——img src=""/p会议刺客足够洗你的脸，所以当我在一家餐馆遇到海伦后，我意识到她只是办公室不错的光学放张唱片，看看谁跳舞，然而我们在这一点上领先于曲线，或个人发展。基准强化直升机视图亮点休息五分钟，在树上打一拳，然后头脑清醒地回到这里，这样就可以实现我们的愿景，即拥有一个市场领先的平台，eow的交付成果情况如何？/p/article:root { -进度条-高度：4px-进度条-颜色：盖恩斯伯勒-进度条-数值-颜色：道奇蓝-进度条-值：20%;}文章{职务：相对；填充：24px宽度：100%;最大宽度：700像素；边距：60px自动；}.文章标题{位置：粘性；top:0；垫底：24px}img {宽度：100%;边距-底部：18px}。进度包装{位置：相对；}.进度标签{位置：绝对；右：0;底部：0;字体大小：14px}进度{-网络工具包-外观：无；蚊子外观：无；外观：无；位置：绝对；宽度：100%;高度：var( -进度条-高度);背景色：var( -进度条颜色);边框：无；}进度：-moz-progress-bar { background-color:var(-progress-bar-value-color)；}进度：-WebKit-progress-bar { background-color:var(-progress-bar-color)；}进度：-WebKit-progress-value { background-color:var(-progress-bar-value-color)；}进度：-ms-fill { background-color:var(-进度条-值-颜色)；}计算并显示百分比

　　$(文档)。ready(function(){ const win=$(window)；const doc=$(文档);const进度条=$( progress )；const progressLabel=$( .进度标签);const setValue=()=win。滚动顶部()；const set max=()=doc。height()-赢。height()；常量设置百分比=()=数学。圆(赢。scroll top()/(doc。height()-赢。height())* 100)；进度标签。text(set percent() % )；进度栏。attr({ value:setValue()，max:set max()})；doc.on(scroll ，()={进度标签。text(set percent() % )；进度栏。attr({ value:setValue()})；});win.on(resize ，()={进度标签。text(set percent() % )；进度栏。attr({ value:setValue()，max:set max()})；})});

8. 进阶：时间轴

　　 时间轴相当于上述列表锚点的升级版，可用于年鉴展示、记事本、土豆列表等应用中。

　　div id= wrapper div id= container h1 timeline/h1 ol class= timeline Li h 21997/H2 ol Li h3Lorem ipsum dolor sit amet，consectetur adipsing elit/H3 pNam non purus vel或I morie consequat ./p /li li h3Etiam和法院理事会中的velit和欧盟metus/h3 ./p /li /ol /li！-.-李今日H2/H2/李/ol/div/divol.timeline ol，ol。时间轴，html，正文{ margin:0；填充：0;}*，*:before，*:after { box-sizing:border-box；} #包装{ margin:0自动；最大宽度：64em} #容器{ float:左；填充：1em宽度：100%;}h1，H2 { text-align:center；}ol.timeline，ol.timeline ol { list-style:无；} ol。时间轴Li { padding-left:2px；位置：相对；} ol。时间轴李：之前{ background-color:# a2ed 56；内容："";身高：100%;左：0;位置：绝对；top:0；宽度：2px } @仅媒体屏幕和（最小宽度：40em){ ol。时间轴李：之前{左：50%；transform:平移x(-50%)；} } ol。时间轴lih 2 { background-color:# a2ed 56；颜色：# 1d1f20边距：0;位置：-WebKit-sticky；位置：粘性；文本转换：大写；top:0；} @仅媒体屏幕和（最小宽度：40em){ ol。时间轴lih 2 {边框半径：0.25 em边距：0自动；边距-底部：1em最大宽度：200像素；} } ol。时间轴liol { display:flex；柔性包装：缠绕；} ol。timelineliolli { border-top:2px solid # a2ed 56；弹性：0 0 100%;填充：0 0 0.5em 1em } @仅媒体屏幕和（最小宽度：40em){ ol。timelineliolli {弹性基础：50%；} ol。timelineliolli:n-child(奇数){左填充：0；右填充：1em} ol。timelineliolli:n-child(偶数){ margin-top:2em；右填充：0;}}ol.timelineliollih3:第一胎{ color:# a2ed 56；边距-底部：-0.75 em；} ol。时间轴李：n-child(6n 2):之前，ol。时间轴李：n-child(6n 2){ background-color:# 83e4e 2；} ol。时间轴Li:n-child(6n 2)olli { border-color:# 83e4e 2；} ol。时间轴李：n子(6n 2)奥利{ color:# 83e4e 2；} ol。时间轴李：n-child(6n 3):之前，ol。时间轴李：n-child(6n 3){ background-color:# FD 6470；} ol。时间轴Li:n-child(6n 3)olli { border-color:# FD 6470；} ol。时间轴李：n子(6n 3)奥利{ color:# FD 6470；} ol。时间轴李：n-child(6n 4):之前，ol。时间轴李：n-child(6n 4){ background-color:# FCA 858；} ol。时间轴Li:n-child(6n 4)olli { border-color:# FCA 858；} ol。时间轴李：n-child(6n 4)奥利{ color:# FCA 858；} ol。时间轴李：n-child(6n 5):之前，ol。时间轴李：n-child(6n 5){ background-color:# fddc 32；} ol。时间轴Li:n-child(6n 5)olli { border-color:# fddc 32；} ol。时间轴李：n-child(6n 5)奥利{ color:# fddc 32；} ol。时间轴李：n-child(6n 6):之前，ol。时间轴李：n-child(6n 6){ background-color:# fafafa；} ol。时间轴Li:n-child(6n 6)olli { border-color:# fafafa；} ol。时间轴李：n-child(6n 6)奥利{ color:# fafafa；}

9. 进阶：文字堆积效果

　　b滚动/b(源自古法语我搜索/I或我偷/我)，也称为b滚动/b，是一卷包含文字的纸莎草纸、羊皮纸或纸张3.1/ph2结构/h2pA卷轴通常分成几页，有时是分开的纸莎草纸或羊皮纸，在边缘粘在一起，或者可能是一卷连续书写材料的标记部分。卷轴通常是展开的，以便一次露出一页，用于书写或阅读，其余的页卷到可见页的左侧和右侧。它是从一边到另一边展开的，文本是从页面的顶部到底部逐行书写的。根据语言的不同，字母可以从左到右、从右到左或交替书写(boustrophedon)./PP有些卷轴只是简单的卷起来的书页；其他的可能在每一端都有木制的滚筒：托拉卷轴有相当精致的滚筒以适合他们的仪式功能2005/ph2卷轴使用的历史/H2p卷轴是可编辑记录保存文本的第一种形式，在东地中海古埃及文明中使用。在罗马人发明羊皮纸抄本或装订书之前，以色列人和其他人就使用羊皮纸卷轴，这在公元一世纪左右开始流行。卷轴比抄本更受重视，直到罗马时代，在那里它们通常被写在一个纬度栏里100元/页书写卷轴所用的墨水必须附着在一个卷起或展开的表面上，因此开发了特殊的墨水。即便如此，墨水还是会慢慢从卷轴上剥落/ph2Rolls/h2pRolls记录伦敦威斯敏斯特宫议会档案馆保存的英国议会法案/phtml { margin:0 auto；溢出：自动；位置：相对；文本对齐：对齐；字体大小：32px背景：# FDFC47背景：-WebKit-线性-渐变(向右、#24FE41、# fdfc 47)；背景：线性梯度（向右、#24FE41、# fdfc 47)；} body { max-width:500 px；高度：500像素溢出：自动；颜色：# 2d 2d边距：40px自动；背景：# FFFFFF}body:after，*:before，span { position:sticky；top:0em；底部：0em空白：nowrap}p，h2，div { display:inline；字体大小：1雷姆；} H2:之前{内容： ；} p:before { content: ；}h2 { color: rgba(255，100，100，1)；}b，i { color: rgba(255，100，100，0.7)；}[].foreach。调用(文档。查询选择器all( p，li，h2，a )，函数(El){ El。innerhtml=El。innerhtml .拆分("")。map(word=`span${word}/span `).联接("");});//自动触发滚动函数自动滚动(){ document。滚动元素。滚动by({ top:10，behavior: smooth })；} var int rvl=setInterval(自动滚动，100)；函数stop(){清除间隔(intr VL)；}文档。文档元素。addevent侦听器( mousemove ，stop)；

10. 进阶：拼图效果

　　SVG xmlns= http://www .w3。org/2000/SVG version= 1.0 width= 450 height= 450 path vector-effect= non-scaling-stroke d= m0，0L150，0 M150，0L149，15 . 1515151536506

　　043,135.72969704919345C148.30165737840858,121.45939409838688,146.60331475681716,92.91878819677378,135.9460950819655,87.26708643206159C125.28887540711382,81.6153846673494,105.67277867900191,98.85258703953816,98.31560238205316,93.31985483432332C90.9584260851044,87.78712262910848,95.86017021931877,59.48445584649006,106.08632379765042,55.4571772015448C116.31247737598203,51.42989855659955,131.86304039843085,71.67800804932747,140.06938800617533,66.48104320534887C148.2757356139198,61.28407836137026,149.13786780695992,30.64203918068513,149.56893390347997,15.321019590342566L150,0"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M300,0L450,0 M450,0L450,150 M450,150L434.583326652323,153.59126987393032C419.166653304646,157.18253974786066,388.33330660929204,164.3650794957213,381.63610015762214,153.82556747666192C374.93889370595224,143.28605545760252,392.3778274979664,115.02449167162312,388.42595723945146,104.84691440262078C384.47408698093653,94.66933713361846,359.1314126718925,102.57574638159319,353.73039928686853,112.35801660812949C348.32938590184455,122.14028683466574,362.8700334408407,133.79841803976356,357.2385770470326,140.3847254348356C351.6071206532245,146.97103282990759,325.8035603266123,148.4855164149538,312.9017801633061,149.2427582074769L300,150 M300,150L300.88377731884134,134.68206692623494C301.7675546376827,119.36413385246988,303.5351092753653,88.72826770493975,312.70416006576795,81.51143567484586C321.8732108561706,74.29460364475196,338.4437577992932,90.49680573209427,348.4881653776584,86.90520621265637C358.53257295602356,83.31360669321847,362.0508411696312,59.92820556700036,354.081986768881,55.80894999394135C346.11313236813083,51.689694420882326,326.65715535302274,66.8365844009824,315.7289704558163,60.746116994185364C304.8007855586098,54.655649587388325,302.4003927793049,27.327824793694163,301.2001963896525,13.663912396847081L300,0"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M0,150L14.431873446860846,151.59223168461963C28.863746893721693,153.1844633692393,57.727493787443386,156.36892673847862,63.81370097469671,149.3569730371089C69.89990816195004,142.34501933573918,53.20857564273499,125.13664856376043,57.41601665267879,118.35387216181743C61.62345766262259,111.57109575987448,86.72967220172522,115.21391372796728,91.89335174152377,123.41848757977095C97.05703128132234,131.62306143157463,82.27817582181684,144.38939116708917,88.63886136501219,149.5799358844125C94.99954690820755,154.7704806017358,122.49977345410377,152.3852403008679,136.2498867270519,151.19262015043395L150,150 M150,150L149.973193265246,163.25569656614937C149.94638653049202,176.51139313229874,149.89277306098404,203.02278626459744,139.50106232498663,210.01231400451468C129.10935158898923,217.0018417444319,108.3795435865024,204.4695040919677,102.3265271760971,209.6171452976796C96.27351076569181,214.7647865033915,104.89728594736806,237.59240656727948,117.94077379386776,242.72519670084048C130.98426164036746,247.85798683440154,148.4474621516906,235.29594703763556,154.52728529684987,241.89260926577427C160.60710844200915,248.48927149391307,155.3035542210046,274.24463574695653,152.65177711050228,287.12231787347827L150,300 M150,300L136.41378134453706,301.9978974423072C122.8275626890741,303.99579488461444,95.65512537814818,307.9915897692289,88.57540847915023,298.65161635895845C81.49569158015227,289.3116429486881,94.50869509308224,266.63590124353277,88.34030337850798,258.57873611175137C82.17191166393371,250.52157097997,56.82212472185521,257.0829824215625,54.049391123131464,265.9486942143682C51.27665752440771,274.81440600717383,71.08097726903871,285.9844181511926,65.83558763907592,292.04368584066674C60.590198009113145,298.1029535301409,30.295099004556572,299.05147676507045,15.147549502278286,299.5257383825352L0,300 M0,300L0,150"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M150,150L164.57137949219168,152.39670813472034C179.14275898438336,154.79341626944066,208.2855179687667,159.5868325388813,215.66351015977762,150.64676126035002C223.0415023507886,141.70668998181873,208.65472774842706,119.03313115531546,212.44095852197418,106.97564801958445C216.22718929552127,94.91816488385344,238.1864254449769,93.47675743889465,242.30063480616164,105.81822033151734C246.41484416734636,118.15968322414001,232.68402674026015,144.28401645434414,239.32641647452138,153.94479145535482C245.96880620878264,163.60556645636552,272.98440310439133,156.80278322818276,286.49220155219564,153.40139161409138L300,150 M300,150L300.58848922266134,162.76014152121215C301.1769784453226,175.52028304242432,302.3539568906453,201.04056608484862,308.3530463558756,207.02745212005405C314.3521358211059,213.01433815525948,325.17333630624387,199.467827183246,332.782218886124,205.98559997252482C340.39110146600405,212.50337276180366,344.78766614062624,239.0854293123748,337.4179622081037,244.91147931880394C330.04825827558113,250.73752932523306,310.9122857359139,235.80757278752017,302.7149139333725,241.5296584770292C294.5175421308311,247.25174416653817,297.25877106541554,273.6258720832691,298.6293855327078,286.81293604163454L300,300 M300,300L286.8256919800388,302.73826607970113C273.65138396007757,305.4765321594022,247.30276792015522,310.9530643188045,240.96920721709873,302.17538488160477C234.63564651404224,293.3977054444051,248.31714114785163,270.3658144106035,241.5962018751227,261.1615721244882C234.87526260239375,251.95732983837289,207.75188942312647,256.5807362999438,204.08592701851285,267.0803687020843C200.41996461389923,277.5800011042247,220.21141298393937,293.9558594469347,215.10666027662953,300.4218356533489C210.00190756931966,306.88781185976313,180.00095378465983,303.44390592988157,165.0004768923299,301.7219529649408L150,300 M150,300L152.65177711050228,287.12231787347827C155.3035542210046,274.24463574695653,160.60710844200915,248.48927149391307,154.52728529684987,241.89260926577433C148.4474621516906,235.29594703763556,130.98426164036746,247.85798683440154,117.94077379386776,242.72519670084048C104.89728594736806,237.59240656727948,96.27351076569181,214.7647865033915,102.3265271760971,209.61714529767963C108.3795435865024,204.4695040919677,129.10935158898923,217.0018417444319,139.50106232498663,210.01231400451468C149.89277306098404,203.02278626459744,149.94638653049202,176.51139313229874,149.973193265246,163.25569656614937L150,150"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M300,150L312.9017801633061,149.2427582074769C325.8035603266123,148.4855164149538,351.6071206532245,146.97103282990759,357.2385770470326,140.3847254348356C362.8700334408407,133.79841803976356,348.32938590184455,122.14028683466574,353.73039928686853,112.35801660812946C359.1314126718925,102.57574638159319,384.47408698093653,94.66933713361846,388.42595723945146,104.84691440262078C392.3778274979664,115.02449167162312,374.93889370595224,143.28605545760252,381.63610015762214,153.82556747666192C388.33330660929204,164.3650794957213,419.166653304646,157.18253974786066,434.583326652323,153.59126987393032L450,150 M450,150L450,300 M450,300L436.82050647459147,299.21288768096537C423.641012949183,298.4257753619307,397.28202589836593,296.8515507238614,390.92947621132134,290.8451437251303C384.57692652427676,284.8387367263992,398.23081420100453,274.4001473670062,392.63858789389707,267.74056355085685C387.0463615867896,261.08097973470757,362.20802129584695,258.20040146180196,358.5637941404978,263.2539734591605C354.9195669851488,268.30754545651894,372.46945296539326,281.29526772414147,366.24117279790926,288.7419638593254C360.01289263042526,296.18865999450935,330.0064463152126,298.09432999725465,315.0032231576063,299.04716499862735L300,300 M300,300L298.6293855327078,286.81293604163454C297.25877106541554,273.6258720832691,294.5175421308311,247.25174416653817,302.7149139333725,241.5296584770292C310.9122857359139,235.80757278752017,330.04825827558113,250.73752932523306,337.4179622081037,244.91147931880394C344.78766614062624,239.0854293123748,340.39110146600405,212.50337276180366,332.7822188861239,205.98559997252485C325.17333630624387,199.467827183246,314.3521358211059,213.01433815525948,308.3530463558756,207.02745212005405C302.3539568906453,201.04056608484862,301.1769784453226,175.52028304242432,300.58848922266134,162.76014152121215L300,150"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M0,300L15.147549502278286,299.5257383825352C30.295099004556572,299.05147676507045,60.590198009113145,298.1029535301409,65.83558763907592,292.04368584066674C71.08097726903871,285.9844181511926,51.27665752440771,274.81440600717383,54.049391123131464,265.9486942143682C56.82212472185521,257.0829824215625,82.17191166393371,250.52157097997,88.34030337850798,258.57873611175137C94.50869509308224,266.63590124353277,81.49569158015227,289.3116429486881,88.57540847915023,298.65161635895845C95.65512537814818,307.9915897692289,122.8275626890741,303.99579488461444,136.41378134453706,301.9978974423072L150,300 M150,300L148.83031623124336,315.20269857598424C147.66063246248675,330.40539715196854,145.3212649249735,360.81079430393703,139.0131598522373,366.1263925430023C132.70505477950113,371.4419907820675,122.428212171542,351.6677901082294,114.69272282609364,354.41710430526285C106.95723348064526,357.1664185022962,101.76309739770763,382.4392475702011,109.89880756507118,387.0560695045038C118.03451773243474,391.6728914388066,139.5000741500995,375.6337062395073,148.40524726430448,382.68169346648966C157.31042037850946,389.72968069347206,153.65521018925475,419.864840346736,151.8276050946274,434.932420173368L150,450 M150,450L0,450 M0,450L0,300"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M150,300L165.0004768923299,301.7219529649408C180.00095378465983,303.44390592988157,210.00190756931966,306.88781185976313,215.10666027662953,300.4218356533489C220.21141298393937,293.9558594469347,200.41996461389923,277.5800011042247,204.08592701851285,267.0803687020843C207.75188942312647,256.5807362999438,234.87526260239375,251.95732983837289,241.5962018751227,261.1615721244882C248.31714114785163,270.3658144106035,234.63564651404224,293.3977054444051,240.96920721709873,302.17538488160477C247.30276792015522,310.9530643188045,273.65138396007757,305.4765321594022,286.8256919800388,302.73826607970113L300,300 M300,300L300.81935805236554,313.1435162553214C301.63871610473103,326.2870325106428,303.27743220946206,352.5740650212856,312.42784925248606,358.6512204623654C321.57826629551005,364.72837590344517,338.240384276827,350.595654274962,343.55746959332345,356.14998533600493C348.87455490981984,361.7043163970479,342.8466075614958,386.94570014761695,333.8914202613098,392.87903737875376C324.9362329611239,398.8123746098906,313.05380570907613,385.4376653215952,306.9173623402142,391.7398180052308C300.78091897135226,398.0419706888665,300.3904594856761,424.02098534443326,300.1952297428381,437.0104926722167L300,450 M300,450L150,450 M150,450L151.8276050946274,434.932420173368C153.65521018925475,419.864840346736,157.31042037850946,389.72968069347206,148.40524726430448,382.68169346648966C139.5000741500995,375.6337062395073,118.03451773243474,391.6728914388066,109.89880756507118,387.0560695045038C101.76309739770763,382.4392475702011,106.95723348064526,357.1664185022962,114.69272282609363,354.41710430526274C122.428212171542,351.6677901082294,132.70505477950113,371.4419907820675,139.0131598522373,366.1263925430023C145.3212649249735,360.81079430393703,147.66063246248675,330.40539715196854,148.83031623124336,315.20269857598424L150,300"> </path> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" height="450"> <path vector-effect="non-scaling-stroke" d="M300,300L315.0032231576063,299.04716499862735C330.0064463152126,298.09432999725465,360.01289263042526,296.18865999450935,366.24117279790926,288.7419638593254C372.46945296539326,281.29526772414147,354.9195669851488,268.30754545651894,358.5637941404978,263.2539734591605C362.20802129584695,258.20040146180196,387.0463615867896,261.08097973470757,392.63858789389707,267.74056355085685C398.23081420100453,274.4001473670062,384.57692652427676,284.8387367263992,390.92947621132134,290.8451437251303C397.28202589836593,296.8515507238614,423.641012949183,298.4257753619307,436.82050647459147,299.21288768096537L450,300 M450,300L450,450 M450,450L300,450 M300,450L300.1952297428381,437.0104926722167C300.3904594856761,424.02098534443326,300.78091897135226,398.0419706888665,306.9173623402142,391.7398180052308C313.05380570907613,385.4376653215952,324.9362329611239,398.8123746098906,333.8914202613098,392.87903737875376C342.8466075614958,386.94570014761695,348.87455490981984,361.7043163970479,343.55746959332345,356.14998533600493C338.240384276827,350.595654274962,321.57826629551005,364.72837590344517,312.42784925248606,358.6512204623654C303.27743220946206,352.5740650212856,301.63871610473103,326.2870325106428,300.81935805236554,313.1435162553214L300,300"> </path> </svg></div>.container { width: 470px; margin: 40px auto; background: #FFFFFF; height: 450px; overflow: auto;}svg { position: -webkit-sticky; position: sticky; top: 0;}path { fill: none; stroke: #2D2D2D; stroke-width: 1.5px;}其他优秀案例

　　日历: https://codepen.io/dannievinther/details/pGdjPV

　　段落显示 https://codepen.io/BurmesePotato/pen/qBbqpNB

　　滑动卡片 https://codepen.io/Kseso/pen/JyEWoP

　　瀑布流 https://codepen.io/collinsworth/pen/aEJGvg

　　字幕式文章标题 https://codepen.io/coderthegreat/details/abzrOpg

　　鼠标滚轮控制元素 https://codepen.io/equinusocio/pen/GeBxJz

　　页面布局 https://codepen.io/havardob/details/gOPNpmm

　　页面布局 https://codepen.io/ncerminara/pen/VdLpzd

兼容性

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。