从另一个方向攻击这个Q。
想象这是一个寻找最近的滚动祖先的游戏。
<！——粘性不起作用——>
<h1 style=" font - family:宋体;上图:0;“> Hello World h1 > < /
问题:
1/3:粘节点?< h1 >。
2/3:祖先?< >。
3/3: <body> scrolling ?FALSE => "No effect"。
修复:“粘性工作”(<身体>滚动?真正的)。
身体{
最小高度:300 vh;
｝
<！——粘性工作——>
<h1 style=" font - family:宋体;上图:0;“> Hello World h1 > < /
记住这一点-这里有一些“hello world”“著名”的“不工作”粘性场景:)大多数情况都与这些情况中的一个或多个有关。
案例1:缺少“顶部”(很容易修复):
不工作:
/*不工作的例子*/
除了{
位置:粘性;
背景:浅灰色;
｝
主要{
身高:200 vh;
｝
除了< >
除了< h2 >的< / h2 >
除了< / >
<大>
<标题> < / h1 >条
<p>我是孤独的，神圣的，神圣的。我的判决减去骚扰和自然之美，在时间上的理性和权利，别名，官方的假设，官场，权位，权位，权位，权位，权位，权位!
< / p >
主> < /
修复(添加顶部):
旁白{
位置：粘性;
顶部： 0;
}
主{
高度：200vh;
}
<aside>
<h2>粘性旁</h2>
</aside>
<main>
<h1>品</h1>
<p>Lorem ipsum dolor sit amet， consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus！
</p>
</main>
案例2:粘节点和溢出(容易修复):
我通过添加#extra-wrapper来“破坏”粘性，溢出设置为auto -or- hidden -or- visible -但没有任何剪切内容。
"The problem"现在是最近的滚动祖先(#extra-wrapper)"without"任何滚动(没有滚动条拖动选项== " No scrolling祖宗")。
Not working:
/* not working example */
#overflow-wrapper{
overflow: scroll;
}
aside{
position: sticky;
background: lightgray;
top: 0px;
}
main{
height: 200vh;
}
<div id="overflow-wrapper">
<aside>
<h2>sticky Aside</h2>
</aside>
<main>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
</main>
</div>
修正-剪辑内容(现在他们是“最近的滚动祖先”)。
工作:
/* not working example */
#overflow-wrapper{
overflow: scroll;
max-height: 60vh; /* clip the content */
}
aside{
position: sticky;
background: lightgray;
top: 0px;
}
main{
height: 200vh;
}
<div id="overflow-wrapper">
<aside>
<h2>sticky Aside</h2>
</aside>
<main>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
</main>
</div>
案例3:与“错误/不滚动”节点相关的粘滞(难以修复)
同样，粘滞偏移相对于它最近的滚动祖先。
我通过添加#extra-wrapper到sticky元素来“破坏”sticky。为什么它不起作用?现在#extra-wrapper的高度== height aside content (box model) == "no scrolling祖宗" == "no effect"。
不工作:
/*不工作的例子*/
除了{
位置:粘性;
上图:0;
背景:浅灰色;
｝
主要{
身高:200 vh;
｝
< div id = " extra-wrapper " >
除了< >
除了< h2 >的< / h2 >
除了< / >
< / div >
<大>
<标题> < / h1 >条
<p>我是孤独的，神圣的，神圣的。我的判决减去骚扰和自然之美，在时间上的理性和权利，别名，官方的假设，官场，权位，权位，权位，权位，权位，权位!
< / p >
主> < /
这是真正“发生”的事情(我在#extra-wrapper中添加了height):
#extra包装器{
背景：浅灰色;
高度：40VH;
}
旁白{
位置：粘性;
顶部： 0;
}
主{
高度：200vh;
}
<div id=“extra-wrapper”>
<aside>
<h2>粘性旁</h2>
</aside>
</div>
<main>
<h1>品</h1>
<p>Lorem ipsum dolor sit amet， consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus！
</p>
</main>
解决办法:
更改sticky节点:
#extra包装器{
位置：粘性;
顶部： 0;
}
旁白{
}
#layout{
迪斯普
}
主{
高度：200vh;
}
<div id=“extra-wrapper”>
<aside>
<h2>粘性旁</h2>
</aside>
</div>
<main>
<h1>品</h1>
<p>Lorem ipsum dolor sit amet， consectetur adipisicing elit.Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus！
</p>
</main>
案例4:显示:flexbox/网格布局-甚至cols by deafult(棘手的修复)
创建伸缩/网格布局，并设置cols之一为粘性。默认情况下，cols高度是偶数=“最近的祖先”(包装器)的高度== cols高度=无滚动效果。
不工作:
#extra-wrapper{
position: sticky;
top: 0;
border: 1px solid red;
}
aside{
}
#layout{
display: flex;
}
main{
height: 200vh;
}
<div id="layout">
<div id="extra-wrapper">
<aside>
<h2>sticky Aside</h2>
</aside>
</div>
<main>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
</main>
</div>
修复:设置粘在一边max-height为90vh为例(现在cols高度不均匀)。
Working:
#extra-wrapper{
position: sticky;
top: 0;
border: 1px solid red;
max-height: 90vh;
}
aside{
}
#layout{
display: flex;
}
main{
height: 200vh;
}
<div id="layout">
<div id="extra-wrapper">
<aside>
<h2>sticky Aside</h2>
</aside>
</div>
<main>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
</main>
</div>
