페이지 제목과 페이지 앵커가 겹치는 문제 해결

Question

HTML 페이지의 상단에 정의된 높이로 고정된 비스크롤 헤더가 있는 경우:

URL 앵커(#fragment 부분)를 사용하여 브라우저가 페이지의 특정 위치로 스크롤되도록 하면서 고정 요소의 높이를 계속 유지하는 방법이 있습니까 도움말 JavaScript를 사용하지 않고?

http://example.com/#bar

<사전> 오류(그러나 일반적인 동작): 올바른: +----------------------+ +--------------- - -------+ | 바//////////////////// 헤더 ///////////////////// /// 헤더 | +----------------------+ +--------------- - -------+ | 나머지 텍스트는 여기에 | ... | |여기의 나머지 부분 | ... | +----------------------+ +--------------- ---- ----+

Answer 1

새 클래스를 설정할 수 없거나 설정하고 싶지 않은 경우 CSS에서 ::before伪元素添加一个固定高度的:target에 대한 의사 클래스를 만들 수 있습니다.

으아아아

또는 jQuery를 사용하여 :target를 기준으로 페이지를 스크롤합니다.

으아아아

Answer 2

저도 같은 문제에 직면했습니다. 앵커 요소에 클래스를 추가하고 상단 표시줄의 높이를 padding-top 값으로 사용하여 이 문제를 해결했습니다.

으아악

다음 CSS를 사용했습니다:

으아악