스크롤할 때 상단에 부착되는 고정 탐색 모음을 어떻게 만듭니까?

스크롤 시 상단에 고정되는 고정 내비게이션 바 만들기

문제:

표시되는 페이지 하단에 내비게이션 바를 디자인합니다. 처음에는. 사용자가 아래로 스크롤하면 탐색 모음이 페이지 상단에 고정될 때까지 올라갑니다.

해결책:

해결책은 jQuery와 JavaScript를 활용하여 탐색 모음의 위치를 ​​변경하는 것입니다. 스크롤 위치.

구현:

1. HTML:

   <div>

   로그인 후 복사

2. CSS :

   #banner {
     height: 273px;
   }
   
   #nav_bar {
     height: 30px;
   }
   
   $(document).ready(function() {
     $(window).scroll(function () {
       if ($(window).scrollTop() > 550) {
         $('#nav_bar').addClass('navbar-fixed-top');
       }
       if ($(window).scrollTop() < 551) {
         $('#nav_bar').removeClass('navbar-fixed-top');
       }
     });
   });

   로그인 후 복사

추가 참고 사항:

• 자바스크립트의 값(550 및 551)을 조정하여 스크롤 위치가 정확히 일치하도록 합니다. 탐색 모음이 수정되어야 합니다.
• 이 솔루션은 특정 스크롤 위치에 고정되어야 하는 다른 요소에 적용할 수 있습니다.

위 내용은 스크롤할 때 상단에 부착되는 고정 탐색 모음을 어떻게 만듭니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!