웹 페이지 상단에 있는 고정 탐색 모음의 스크롤 및 숨기기 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

如何使用 JavaScript 实现网页顶部固定导航栏的滚动隐藏效果？

JavaScript를 사용하여 웹 페이지 상단에 있는 고정 탐색 모음의 스크롤 및 숨기기 효과를 얻는 방법은 무엇입니까?

오늘날의 인터넷 시대에 웹 디자인은 종종 사용자 경험과 페이지 기능의 무결성에 중점을 둡니다. 웹 내비게이션 바는 사용자와 웹 사이트를 연결하는 다리 역할을 하므로 일반적으로 내비게이션 바는 사용자가 필요한 정보를 빠르게 찾을 수 있도록 페이지 상단에 배치됩니다. 그러나 사용자가 웹을 탐색할 때 상단에 내비게이션 바를 오랫동안 표시하면 페이지 공간을 차지하여 사용자가 불편함을 느낄 수 있습니다. 따라서 사용자 경험을 향상시키기 위해 JavaScript를 사용하여 웹 페이지 상단에 고정된 탐색 모음의 스크롤 및 숨기기 효과를 구현할 수 있습니다.

이 효과를 얻는 방법은 스크롤 이벤트를 수신하고 스크롤 방향과 스크롤 거리를 기준으로 탐색 표시줄의 표시 및 숨김을 판단하는 것입니다. 다음은 샘플 코드입니다.

// 获取导航栏元素 const navBar = document.querySelector('.navbar'); // 定义初始滚动位置 let lastScrollTop = 0; // 定义初始导航栏高度 const navBarHeight = navBar.offsetHeight; // 监听滚动事件 window.addEventListener('scroll', function() { // 获取当前滚动位置 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 判断滚动方向 if (scrollTop > lastScrollTop) { // 向下滚动，隐藏导航栏 navBar.style.transform = `translateY(-${navBarHeight}px)`; } else if (scrollTop < lastScrollTop) { // 向上滚动，显示导航栏 navBar.style.transform = 'translateY(0)'; } // 更新滚动位置 lastScrollTop = scrollTop; });

로그인 후 복사

위 코드는 먼저document.querySelector('.navbar')를 통해.navbar클래스 이름을 가진 탐색 모음 요소를 가져옵니다. 다음으로lastScrollTop변수를 정의하여 마지막 스크롤 위치를 저장하고navBar.offsetHeight를 사용하여 탐색 모음의 높이를 가져옵니다.document.querySelector('.navbar')获取了具有.navbar类名的导航栏元素。接下来，我们定义了一个变量lastScrollTop用于存储上次滚动的位置，并且使用navBar.offsetHeight获取了导航栏的高度。

然后，我们通过window.addEventListener('scroll', function() { ... })来监听滚动事件。在滚动事件的回调函数中，我们首先获取当前的滚动位置scrollTop。接下来，通过判断当前滚动位置和上次滚动位置的大小关系，我们可以确定滚动的方向。

如果当前滚动位置大于上次滚动位置，则表示用户向下滚动，我们将导航栏向上隐藏。需要注意的是，我们通过设置navBar.style.transform的translateY属性来实现导航栏的移动，将导航栏的高度（navBarHeight）作为位移参考，以保证导航栏完全隐藏。

相反，如果当前滚动位置小于上次滚动位置，则表示用户向上滚动，我们将导航栏重新显示。

最后，我们需要更新滚动位置lastScrollTop

그런 다음 window.addEventListener('scroll', function() { ... })를 통해 스크롤 이벤트를 수신합니다. 스크롤 이벤트의 콜백 함수에서는 먼저 현재 스크롤 위치 scrollTop을 가져옵니다. 다음으로 현재 스크롤 위치와 마지막 스크롤 위치 사이의 크기 관계를 판단하여 스크롤 방향을 결정할 수 있습니다.

현재 스크롤 위치가 마지막 스크롤 위치보다 크면 사용자가 아래로 스크롤하고 탐색 표시줄을 위쪽으로 숨긴다는 의미입니다. navBar.style.transform의 translateY속성을 설정하여 탐색 막대를 이동하고 탐색 막대의 높이( navBarHeight)를 변경한다는 점에 유의해야 합니다. 코드>)를 변위 참조로 사용하여 탐색 모음이 완전히 숨겨지도록 합니다. 반대로, 현재 스크롤 위치가 마지막 스크롤 위치보다 작다면 이는 사용자가 위로 스크롤했다는 의미이며 탐색 표시줄을 다시 표시합니다. 마지막으로 다음 스크롤 이벤트에서 비교할 수 있도록 스크롤 위치 lastScrollTop를 업데이트해야 합니다. 위의 코드 예제를 통해 웹 페이지 상단에 있는 고정 탐색 표시줄의 스크롤 및 숨기기 효과를 얻을 수 있어 사용자의 탐색 경험이 향상됩니다. 물론 실제 필요에 따라 탐색 모음의 스타일과 효과를 일부 조정하고 개선하여 더 나은 사용자 상호 작용 효과를 얻을 수 있습니다.

위 내용은 웹 페이지 상단에 있는 고정 탐색 모음의 스크롤 및 숨기기 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!