자바스크립트에서 창을 맨 위에 놓는 방법

JavaScript를 사용하여 창 상단을 구현하는 방법: 1. 프런트 엔드 샘플 파일을 만듭니다. 2. getBoundingClientRect를 통해 요소에서 브라우저 창 상단까지의 거리를 가져옵니다. 3. 요소를 상단에 유지합니다.

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

JavaScript로 창을 맨 위에 유지하는 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!