Node.js는 특정 라벨의 내용이 항상 동일한 position_javascript 기술에 있도록 스크롤 막대 스크롤 이벤트를 수신합니다.

지식이 거의 없으므로 더 이상 고민하지 말고 코드로 이동하세요

css:

코드 복사 코드 다음과 같습니다:

<style> <br>#anchor:{ <br>위치:absulate <br>top; :40%; <br>왼쪽:40%; <br>높이:100px; <br>배경색:빨간색 <br></style>/ pre><br&gt ; <BR><BR> <BR>js: </div><BR><BR><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="86119" class="copybut" id="copybut86119" onclick="doCopy('code86119')"><U></U> 코드는 다음과 같습니다. 🎜></a> </span> <pre name="code" class="javascript">var auchorTop = $("#anchor").css("top") </div>auchorTop = Number(auchorTop. substring(0, 앵커Top.indexOf( "p"))); //먼저 리스너 외부에 id=anchor인 레이블의 초기 위치를 기록합니다. <div class="codebody" id="code86119">window.onscroll = function () { <br>var top = document .documentElement.scrollTop || document.body.scrollTop <br>$("#anchor").css("top",anchorTop "px");

🎜>
html:

코드 복사

코드는 다음과 같습니다. < div id="anchor"> window.onscroll에 스크롤 막대 스크롤 이벤트를 추가할 수 있습니다. top=document.documentElement.scrollTop||document.body .scrollTop;은 다음과 같이 작성됩니다. 서로 다른 브라우저 간의 호환성을 피하기 위해 여기서는 chrom 및 ff 브라우저를 테스트했습니다. 전자는 document.body.scrollTop 속성을 지원하므로 다음을 사용할 수 있습니다. '||' 기호는 서로 다른 브라우저와 호환되는 두 속성을 결합합니다. AnchorTop은 대상의 시작 부분과 브라우저 상단 사이의 거리입니다. 여기서 주목해야 할 것은 '#anchor' 태그의 위치입니다. 그렇지 않으면 상단 속성 값은 항상 0px입니다.

스크롤바가 스크롤되면 상단 값이 변경된 후 스크롤바 상단 값에 초기 상단 값인 '#anchor'가 추가되어 내용이 동일한 위치에 유지됩니다.