<p>필요해요. 말과. 페이지를 스크롤할 때 선 요소는 뷰포트 상단, 즉 선이 단어 아래에 있는 원래 위치에 고정됩니다. <br /><br />수정했습니다. 단어와 위치: 끈적하지만 두 가지 문제에 직면합니다:<br /></p><p><code></code><code></code></p>
끈적 끈적한 . 라인이 단어 위로 "점프"하고 뷰포트 상단에 고정하는 방법을 모르지만 강제로 거기에 머물도록 합니다. 단어 요소 아래의 끈적임은 처음에는 올바른 값이 아니었습니다. 스크롤을 시작하면 텍스트가 "흔들"었습니다. 올바른 값은 고정되어 있습니다. 훌륭하게 작동하고 사용하고 싶지만 작동이 중단됩니다. 경고 클래스 위치(빨간색 글꼴): 있어야 합니다. 전사 텍스트의 반대(수평)이지만 이 두 클래스의 텍스트를 함께 축소하는 고정 값입니다. <br /><p><br /></p><p>여기에도 이 "상황"이 있는 JS Bin이 있습니다.
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
위치: 끈적끈적함;
상단: 0;
Z-색인: 1;
배경색: 흰색;
}
.단어 {
패딩: 1vw 3vw 2% 3vw;
}
.단어-세부사항 {
디스플레이: 플렉스;
내용 정당화: 공백 사이;
항목 정렬: 기준선;
}
.전사 {
글꼴 두께: 보통;
}
.경고 {
색상: 빨간색;
여백 왼쪽: 자동;
}
.선 {
테두리 상단: 2px 솔리드 #fdb239;
}
.의미 {
목록 스타일 유형: 없음;
카운터 재설정: 항목;
하이픈: 자동;
글꼴 크기: calc(0.7em + 1.5vw);
}
.의미 >
위치: 상대;
}
.의미 >
내용: 카운터(항목);
카운터 증가: 항목;
위치: 절대;
상단: 0;
텍스트 정렬: 중앙;
왼쪽 여백: calc(-0.7em - 2.5vw);
}
.의미 단어 {
여백 상단: 50px;
}
.문장 {
목록 스타일 유형: 없음;
왼쪽 패딩: 0;
글꼴 크기: calc(0.7em + 1.5vw);
여백 상단: 30px;
}
.문장 > li.sentence-ru {
여백 상단: 15px;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<본문>
<div class="단어">
단어
<div class="word-details">
<div class="transcription">/ 전사 /</div>
<div class="warning">COMMENT</div>
</div>
</div>
<hr class="line">
<ol class="의미">
<li class="meaning-word">의미1</li>
<ul class="문장">
<li class="sentence-en">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum</li>
<li class="sentence-ru">대중적인 믿음과는 달리 Lorem Ipsum은 단순한 임의의 텍스트가 아닙니다. 이 작품은 기원전 45년의 고전 라틴 문학에 뿌리를 두고 있으며 그 역사가 2000년이 넘었습니다. 버지니아주 Hampden-Sydney 대학의 라틴어 교수인 Richard McClintock은 Lorem Ipsum의 구절에서 좀 더 모호한 라틴어 단어 중 하나인 consectetur를 찾아보고 고전 문학에서 그 단어가 인용된 곳을 샅샅이 뒤져 의심할 여지가 없는 출처를 발견했습니다. Lorem Ipsum은 기원전 45년에 작성된 Cicero의 "de Finibus Bonorum et Malorum"(선과 악의 극단)의 섹션 1.10.32 및 1.10.33에서 유래되었습니다. 이 책은 르네상스 시대에 매우 인기가 있었던 윤리 이론에 관한 논문이다. Lorem Ipsum의 첫 번째 줄인 "Lorem ipsum dolor sit amet.."은 섹션 1.10.32의 줄에서 유래되었습니다.</li>
</ul>
<li class="meaning-word">의미2</li>
<ul class="문장">
<li class="sentence-en">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum</li>
</ul>
</ol>
</body>
</html></pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
페이지 상단에 여러 요소를 분리하여 유지하는 것은 스크롤할 때 어렵기 때문에 더 간단한 솔루션을 제안합니다. 고정바가 "점프"하는 이유는 고정바의 초기 위치가 스크롤할 때 페이지 상단의 위치와 다르기 때문입니다
스크롤하는 동안 hr 줄이 사라지는 것을 방지하기 위해 페이지 상단에 유지하려는 모든 구성 요소를 div와 같은 컨테이너에 넣은 다음 해당 컨테이너를 끈적하게 만듭니다.
두 번째 문제는 기본 본문 여백(10px) 설정으로 인해 처음에는 고정 막대가 약간 낮다는 것입니다. 그런 다음 페이지를 스크롤합니다. 본문 여백은 이미 스크롤되었으며 고정 막대가 절대 상단(상단: 0;)에 있도록 설정했으므로 추가로 10px를 상단으로 점프해야 합니다. 빠른 수정은 본문 상단 여백을 0으로 설정하는 것입니다. 그러면 붙여넣기 막대가 항상 페이지 상단의 동일한 위치에 있게 됩니다.
아래는 업데이트된 코드 조각입니다.