Das Anwenden von „position: Fixed' auf ein Element unterbricht die Ausrichtung des Inhalts, die durch „display: flex' gesteuert wird.

Question

Während die Seite an ihre ursprüngliche Position scrollt, füge ich oben im Fenster, dem Bereich unter dem Wort, .word- und .line-Elemente hinzu. Ich habe es geschafft, .word an der Position „sticky“ zu fixieren, hatte aber zwei Probleme: Wenn ich es auf .line anwende, „springt“ es um das Wort herum, was ich nicht tue

P粉539055526 · Answer

在滚动页面时，在页面顶部保持几个元素分开是很困难的，所以我建议一个更简单的解决方案。你的黏贴条的“跳跃”是因为黏贴条的初始位置与滚动时它在页面顶部的位置不同

为了避免你的hr线消失，而滚动，我会把所有的组件，你想保持在页面的顶部在一个容器，例如一个div，然后使该容器粘。

第二个问题是，因为默认的body margin (10px)设置你的sticky bar在开始的时候有点低。然后我们滚动页面-主体边距已经被滚动过了，你设置粘条绝对在顶部(top: 0;)，所以它必须跳到顶部这额外的10px。快速修复是将body顶部边距设置为0，然后您的粘贴条在页面顶部的位置始终相同。

下面是更新后的代码片段。

body {
    margin-top: 0;
}

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.word {
    padding: 1vw 3vw 2% 3vw;
}

.word-details {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.transcription {
    font-weight: normal;
}

.warning {
    color: red;
    margin-left: auto;
}

.line {
    border-top: 2px solid #fdb239;
}

.meaning {
    list-style-type: none;
    counter-reset: item;
    hyphens: auto;
    font-size: calc(0.7em + 1.5vw);
}

.meaning > li {
    position: relative;
}

.meaning > li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    text-align: center;
    margin-left: calc(-0.7em - 2.5vw);          
}

.meaning-word {
    margin-top: 50px;
}

.sentences {
    list-style-type: none;
    padding-left: 0;
    font-size: calc(0.7em + 1.5vw);
    margin-top: 30px;                   
}

.sentences > li.sentence-ru {
    margin-top: 15px;                   
}

Word

/ transcription /
COMMENT

Meaning1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Meaning2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum