스크롤 시 Bootstrap Navbar에 애니메이션을 적용하거나 축소하는 방법은 무엇입니까?

부트스트랩을 사용하여 스크롤 시 Navbar에 애니메이션을 적용하거나 축소하는 방법

스크롤할 때 Navbar에 애니메이션을 적용하거나 축소하는 솔루션을 검색하면 다음과 같은 문제가 발생할 수 있습니다. 오래된 정보, 특히 Bootstrap 3과 관련된 정보를 참조하세요. 이 문서에서는 Bootstrap 4 및 Bootstrap 4에 대한 현재 솔루션에 중점을 두고 있습니다. 5.

Bootstrap 5

Bootstrap 5는 스크롤 시 정적-고정 탐색 모음 효과를 생성하기 위해 끈적한 상단 클래스를 유지합니다. 또는 JavaScript IntersectionObserver를 활용하여 "트리거" 요소를 모니터링하고 트리거가 표시되면 CSS 클래스를 탐색 모음에 적용할 수 있습니다. 그런 다음 이 클래스에는 navbar의 모양과 위치를 조정하는 데 필요한 CSS가 포함될 수 있습니다.

Bootstrap 4

Bootstrap 4에는 Affix 구성 요소가 없기 때문에 끈끈한- navbar가 상단에 도달하면 부착하는 top 클래스입니다. 그러나 이 메소드만으로는 navbar가 언제 부착되는지 나타내기 위해 JavaScript 이벤트를 트리거하지 않습니다. 결과적으로, 고정된 navbar의 스타일을 조작하려면 JavaScript가 필요합니다. IntersectionObserver는 navbar 위의 트리거 요소가 뷰포트에 도달하고 "고정" 상태를 트리거하는 시기를 감지하는 데 적합한 옵션입니다.

jQuery Alternatives

Bootstrap의 내장된 기능적으로는 ScrollPos-Styler와 같은 jQuery 플러그인을 사용하거나 자체 jQuery 스크립트를 작성하여 탐색 표시줄을 제어할 수도 있습니다. 스크롤 스타일. 한 가지 접근 방식은 data-toggle="affix"로 고정 상단 navbar를 정의하고 jQuery를 사용하여 스크롤 위치를 관찰하고 조건에 따라 .affix 클래스를 전환하는 것입니다.

추가 리소스

• [고정 상단 Navbar - IntersectionObserver 데모](https://codepen.io/pdreier/pen/QWNYrrZ)
• [Sticky Top Navbar - jQuery 데모](https://codeply.com/go/62Roy6RDOa)
• [더 많은 Bootstrap 4 스크롤시 Navbar 스타일 변경 예시](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

위 내용은 스크롤 시 Bootstrap Navbar에 애니메이션을 적용하거나 축소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!