스크롤 시 Navbar 색상을 동적으로 변경하는 방법은 무엇입니까?

스크롤하는 동안 동적 Navbar 색상 변경

처음에는 배경색이 없는 navbar를 구현하고 스크롤 후 점차적으로 색상을 변경하려면 JavaScript의 조합이 필요합니다. 및 CSS

JavaScript:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

이 코드는 문서의 세로 스크롤 위치를 확인합니다. navbar의 높이를 초과하는 경우 navbar 요소로 "스크롤된" 클래스를 전환합니다.

CSS:

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

이 CSS 코드는 모양을 정의합니다. "스크롤된" 클래스가 있는 탐색 모음의 색상을 변경하면서 흰색 배경색과 부드러운 전환 효과를 적용합니다.

구현:

제공된 JavaScript 코드를 HTML 문서의 헤드에 추가하고 CSS 코드를 스타일 시트에 추가하면 이러한 동적 탐색 모음 색상 변경을 쉽게 구현할 수 있습니다. 사용자가 페이지를 아래로 스크롤하면 탐색 표시줄이 점차 원하는 배경색으로 전환됩니다.

참조:

실시간 데모를 보려면 다음 JSFiddle을 참조하세요. [JSFiddle](https://jsfiddle.net/qe9L725y/).

위 내용은 스크롤 시 Navbar 색상을 동적으로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!