부트스트랩을 사용하여 스크롤 시 애니메이션/축소되는 Navbar를 어떻게 만들 수 있습니까?

부트스트랩을 사용하여 스크롤 시 Navbar 애니메이션/축소

스크롤 시 축소되는 navbar를 만드는 것은 최적화하여 사용자 경험을 향상시키는 인기 있는 디자인 요소입니다. 더 작은 화면의 공간. Bootstrap을 사용하여 이를 달성할 수 있는 방법은 다음과 같습니다.

Bootstrap 5

Bootstrap 5에서는 고정-고정 탐색 모음을 생성할 수 있는 끈적끈적한 상단 클래스를 도입했습니다. 효과. navbar 요소에 스티커 상단을 추가하기만 하면 페이지가 스크롤될 때 뷰포트 상단에 고정됩니다.

Bootstrap 4

위치 사용 : Sticky

1. sticky-top 클래스를 추가하세요. navbar 요소.
2. navbar가 고정될 때 위치, 패딩 및 배경을 변경하도록 CSS를 정의합니다.
3. JavaScript를 사용하여 navbar가 뷰포트 상단에 도달하는 시점을 감지하고 고정 클래스를 적용합니다. .

IntersectionObserver 사용 API

1. navbar가 고정되어야 하는 시기를 나타내는 트리거 요소를 만듭니다.
2. IntersectionObserver API를 사용하여 이 트리거 요소를 감시합니다.
3. 트리거 요소가 표시되면 다음을 사용하여 고정 클래스를 탐색 모음에 적용합니다. JavaScript.

jQuery 사용

1. 창의 스크롤 이벤트에 JavaScript 이벤트 핸들러를 연결합니다.
2. 현재 스크롤 위치를 확인하세요. 적절한 CSS 클래스를 navbar.

jQuery 사용 예

<nav class="navbar navbar-inverse bg-inverse fixed-top">
    <!-- your navbar markup -->
</nav>

<script>
$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('.navbar').addClass('sticky-top');
    } else {
        $('.navbar').removeClass('sticky-top');
    }
});
</script>

추가 참고 사항

• Bootstrap 4는 단종되었습니다. 구성요소를 부착하므로 위의 방법을 사용하는 것이 좋습니다. 대신
• 특정 디자인 요구 사항에 맞게 CSS와 JavaScript를 조정해야 할 수도 있습니다.
• 영감을 얻고 구현 지침을 얻으려면 참조 데모와 예를 살펴보세요.

위 내용은 부트스트랩을 사용하여 스크롤 시 애니메이션/축소되는 Navbar를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!