Html 带位置的定位：粘性

复制这个问题

我正在做一个私人项目，但遇到了一个奇怪的问题。正如你们所看到的，我有3个部分，它们应该排在后面。由于

position:sticky

的性质，我希望它们在滚动后粘在顶部。然而，它们有一个奇怪的偏移量，只有第三部分在滚动后粘在顶部

//
$enable sticky sections:true；
$sticky区段计数：3；
//
*,
：：之后，
：：之前{
框大小：边框框；
}
html{
字体系列：-苹果系统、BlinkMacSystemFont、，
“Segoe UI”、“机器人”、“氧气”，
“Ubuntu”、“Cantarell”、“Fira Sans”，
“Droid Sans”，“Helvetica Neue”，无衬线；
字号：1rem；
线高：1.5；
}
身体{
保证金：0；
}
身体{
> {
部分{
位置：相对位置；
}
}
}
@如果（$启用粘性部分）{
身体{
> {
部分{
位置：粘性；
最小高度：100vh；
@对于$i，从1到$sticky部分计数-1{
&：第n个类型（#{$i+1}）{
顶部：calc（#{100*$i}vh-#{20*$i}px）；
z-指数：#{100*$i}；
//
背景色：{2196f3*$i}；
//
}
}
}
}
}
}

文件

我忘记了

位置：sticky

的工作原理类似于

位置：relative

，直到它被滚动通过。意思不是

top:calc（#{100*$i}vh-#{20*$i}px），我需要去：
页边距顶部：-{20*$I}px

这是一个有效的例子


//
$enable sticky sections:true；
$sticky区段计数：3；
//
*,
：：之后，
：：之前{
框大小：边框框；
}
html{
字体系列：-苹果系统、BlinkMacSystemFont、，
“Segoe UI”、“机器人”、“氧气”，
“Ubuntu”、“Cantarell”、“Fira Sans”，
“Droid Sans”，“Helvetica Neue”，无衬线；
字号：1rem；
线高：1.5；
}
身体{
保证金：0；
}
身体{
> {
部分{
位置：相对位置；
}
}
}
@如果（$启用粘性部分）{
身体{
> {
部分{
位置：粘性；
最小高度：100vh；
@对于$i，从1到$sticky部分计数-1{
&：第n个类型（#{$i+1}）{
页边顶部：-#{20*$i}px；
z-指数：#{100*$i}；
//
背景色：{2196f3*$i}；
//
}
}
}
}
}
}

创建一个工作片段来重现您的问题。您似乎不理解粘性是如何工作的。您没有为第一个部分定义任何最高值，您正在为另外两个部分定义非常大的值。。。你在寻找什么样的结果？@TemaniAfif，嗯，每个部分的
min height
为100vh。如前所述，我希望它们彼此垂直排列，我减去
20px*$I
以显示它们一点，在底部建议进一步滚动，我使用
nth类型（#{$I+1}）
选择总共三个部分中的第二个和第三个？@TemaniAfif。但也许我确实误解了
位置：sticky
，但是昨天原型制作的时候一切都很好。但是昨天原型制作的时候一切都很好。->给我们展示原型，因为它仍然不清楚你想要做什么。。让他们看一看，在底部建议进一步滚动-->不确定这是什么意思，但我怀疑sticky能做你想做的事情你甚至不需要位置：sticky在这种情况下，你可以删除it@TemaniAfif，我知道，目前它是纯滚动的，但我将来会需要它。我对你的代码笔进行的测试表明，你可能也不想要它o将边距乘以
$i
，就像您在这里所做的那样：
边距顶部：-{20*$i}px；
。在每次迭代中，边距都会不必要地移动20px。也许-也许不是。只是一个有建设性意图的观察。@RobMoll。哈哈哈，不用担心；'D。目前我既不使用
边距
，也不使用
顶部
。我将
部分
用作
容器
，并给它们一个
滚动期间线性移动到0的填充
。