프런트 엔드의 천장 효과를 얻는 방법을 단계별로 가르쳐주세요.

프런트 엔드에서 천장 효과 구현

1. 스크롤 이벤트를 듣고 천장 기능 구현

2. CSS에서 천장 효과 구현

페이지를 작성할 때 우리는 종종 이 요구에 직면: 탐색 메뉴 페이지를 슬라이드할 때 탐색 메뉴가 헤드 위치로 슬라이드되면 아래로 슬라이드하면 탐색 메뉴가 초기 위치로 돌아갑니다. .

롤업된 웹페이지의 높이/너비(예: 브라우저 스크롤 막대를 스크롤한 후 숨겨진 페이지 콘텐츠의 높이)

(javascript)        document.documentElement.scrollTop //firefox

(javascript)        document.documentElement.scrollLeft //firefox

(javascript)        document.body.scrollTop //IE

(javascript)        document.body.scrollLeft //IE

(jqurey)             $(window).scrollTop() 

(jqurey)             $(window).scrollLeft()

웹페이지 작업 영역의 높이와 너비

(javascript)       document.documentElement.clientHeight// IE firefox       

(jqurey)             $(window).height()

The 요소와 문서 상단 및 왼쪽 사이의 거리 오프셋 값

(javascript)        DOM元素对象.offsetTop //IE firefox

(javascript)        DOM元素对象.offsetLeft //IE firefox

(jqurey)             jq对象.offset().top

(jqurey)             jq对象.offset().left

페이지 요소와 브라우저 작업 공간 상단 사이의 거리를 가져옵니다

페이지 요소와 브라우저 작업 공간 상단 사이의 거리 = 문서 상단에서 요소의 오프셋 값 - 롤업된 웹페이지의 높이

즉:

페이지 요소와 브라우저 작업공간 상단 사이의 거리 = DOM 요소 object.offsetTop - 문서. documentElement.scrollTop

1. 천장 기능을 구현하기 위한 스크롤 이벤트 듣기

window.addEventListener("scroll",()=>{
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    let offsetTop = document.querySelector('#searchBar').offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector('#searchBar').style.position="fixed";
         document.querySelector('#searchBar').style.top="0";
    } else {
         document.querySelector('#searchBar').style.position="";
         document.querySelector('#searchBar').style.top="";
    }})

2. CSS를 통해 천장 기능 구현하기 Like

position: sticky;
top:0

읽어주신 모든 분들께 감사드립니다. 많이

이 기사는 https://blog.csdn.net/zqyzqy22/article/details/90634702

추천 튜토리얼: "JS Tutorial"

에서 복제되었습니다.

위 내용은 프런트 엔드의 천장 효과를 얻는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!