자바스크립트에서 상위 위치를 얻는 방법

JavaScript에서 상단 함수를 구현하는 방법: 1. getBoundingClientRect를 통해 요소에서 브라우저 창 상단까지의 거리를 가져옵니다. 2. "$(document).scrollTop() for(.. .)" 방법.

이 기사의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript는 고정 함수를 구현합니다

JavaScript로 고정 함수를 구현하는 방법은 여러 가지가 있습니다. 이전에 몇 가지 사용해 본 적이 있는데, 최근에 하고 있는 일에 필요한 것 같아서 저도 찾아봤습니다. 인터넷에 대한 정보를 찾아 마침내 getBoundingClientRect() 메서드를 발견하여 페이지 요소에서 브라우저 창 상단까지의 거리를 얻을 수 있습니다.

최종 코드는 다음과 같습니다.

let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离
//$(document).scrollTop()为滚动条的高度
        for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
            setTimeout(function () {
                window.scrollTo(0, i);
            }, 0)
        }

루프를 사용하는 주요 목적은 상단의 요소를 눈에 띄지 않게 만드는 것입니다. 동시에, for를 변경하면 이 프로세스를 수행할 수 있습니다. 명령문은 let i 대신 var i를 사용합니다. 타이머는 i가 즉시 적용될 수 있도록 즉시 실행 함수로 래핑되어야 합니다.

이 방법으로 얻은 상단 고정 효과와 앵커 포인트는 비슷합니다. 플로팅 상단(특정 부분이 상단에 고정됨)을 구현하려면 position:fixed를 사용하여 구현하는 것을 고려할 수 있습니다.

그렇습니다. . . .

【추천 학습: javascript 기본 튜토리얼】

위 내용은 자바스크립트에서 상위 위치를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!