페이지를 위아래로 스크롤하여 상단 탐색 위치를 변경하세요.

최근 한 디자이너의 디자인 효과 요구 사항이 있었는데 이는 다른 웹사이트에서도 구현되었습니다.

state1: 웹페이지가 아래로 스크롤되면 페이지 헤더 표시줄이 사라지고 상단 탐색 메뉴가 위로 이동합니다.

state2 : 웹페이지가 위로 올라갈 때 스크롤을 하면 페이지 헤더바가 나타나고, 상단 네비게이션이 네비게이션을 따라 아래로 이동합니다.

페이지에 이미 다음 기능이 포함되어 있습니다.

1. 팝업창이 뜰 때 팝업창 레이어는 스크롤이 가능하지만, 페이지 레이어에서는 스크롤이 불가능합니다. 이때 페이지의 body 요소와 html 요소의 오버플로 스타일 속성은 숨김으로 설정됩니다.

페이지 구조는 다음과 같습니다. header>head

페이지 하단

문제는 다음과 같습니다. 이벤트가 너무 자주 모니터링되어(거의 모바일 각 픽셀은 청취 이벤트를 실행해야 함) 요소가 표시되거나 숨겨질 때 깜박이는 문제가 발생하고 때로는 일부 요소가 앞뒤로 전환되는 경우도 있습니다.

이러한 문제를 해결하는 과정에서 제가 제안한 해결 방법은 다음과 같습니다.

1. 문서의 스크롤 다운 및 스크롤 업 이벤트를 각각 모니터링합니다.

2. 모니터링 과정에서 팝업이 발생하면 듣지 마세요.

3. 청취 이벤트 외부에 두 개의 변수를 선언합니다. 즉, allowedMonitorScrollDown = true, allowedMonitorScrollUp = true

(1). 현재 팝업 창이 표시되지 않으면, allowedMonitorScrollDown의 값이 true인지 확인하고, false인 경우 바로 돌아가서 true인 경우 allowedMonitorScrollDown을 false로 설정하고 상태를 전환합니다. state1로 타이머를 설정하고(js는 setTimeout 기능과 함께 제공됨) 2000밀리초 후에 allowedMonitorScrollDown을 true로 복원합니다. 이 설정은 2초마다 스크롤 다운 이벤트에 대해 하나의 리스너를 허용하는 것과 같습니다. 여기에는 또 다른 숨겨진 점이 있습니다. 페이지가 아래로 슬라이드될 때 상태 자체가 state1이면 해당 상태에 대한 작업이 수행되지 않습니다.

(2) 문서의 상향 스크롤을 모니터링하는 과정에서 현재 팝업창이 뜨지 않을 때, allowedMonitorScrollUp 값이 true인지 확인하고, false라면 바로 return하여 모니터링 과정을 빠져나갑니다. ; true인 경우, allowedMonitorScrollUp을 false로 설정하고 상태를 state2로 전환합니다. 타이머(js와 함께 제공되는 setTimeout 함수)를 설정하고 2000밀리초 후에 allowedMonitorScrollUp을 true로 복원합니다. 이 설정은 2초마다 스크롤 다운 이벤트에 대해 하나의 리스너를 허용하는 것과 같습니다. 여기에는 또 다른 숨겨진 점이 있습니다. 페이지가 위로 올라갈 때 상태 자체가 state2이면 해당 상태에 대한 작업이 수행되지 않습니다.

5. 위의 두 가지 상황이 간헐적으로 발생하는 것을 보완하기 위해 페이지 스크롤 막대가 상단 또는 하단에 도달했기 때문에 이 두 가지 극단적인 상황을 별도로 처리하려면 타이머를 사용해야 합니다.

(1), 페이지가 맨 위에 도달하면(팝업 창이 팝업되지 않고 문서의 scrollTop이 0임), 상태는 state1로 전환되어야 합니다.

(2), 페이지가 맨 아래로 나옵니다(팝 없음). -up 창이 팝업되고 문서의 scrollTop이 0과 같습니다. $(window).height()의 합이 $(document).height())와 정확히 같으면 상태를 state2로 전환해야 합니다. ;

주로 팝업창 팝업 여부를 확인하는 데 사용되는 jquery의 필터 기능을 사용했습니다. 스크롤 이벤트를 청취합니다(동등한 방법도 있습니다: 본문의 스크롤 막대 길이가 스크롤바 자체의 높이를 의미하는 것은 $("body")[0].scrollHeight==$( "body").height()) 이며, 배타적 잠금 개념을 사용하고 있습니다. 프로그램에서.

위 내용은 페이지를 위아래로 스크롤하여 상단 탐색 위치를 변경하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!