스크롤 시 Navbar의 배경색을 어떻게 변경할 수 있습니까?

스크롤 시 동적 탐색 모음 색상 변경

페이지를 아래로 스크롤할 때 탐색 모음 색상을 변경하여 웹사이트 탐색 환경을 향상하세요. . 이 질문에서 사용자는 처음에 탐색 모음의 배경색을 제거한 다음 특정 div를 스크롤할 때 색상을 적용하라는 지침을 구했습니다.

해결책:

이 솔루션에는 JavaScript와 CSS의 조합이 포함됩니다. 먼저 HTML 문서의 헤드 섹션에 다음 JavaScript 코드를 추가합니다.

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

이 JavaScript 코드는 창의 스크롤 위치를 모니터링하고 스크롤이 탐색 표시줄을 초과할 때 탐색 표시줄에서 "스크롤된" 클래스를 전환합니다. 막대 높이.

다음으로 스타일시트에 다음 CSS 코드를 추가하세요.

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

이것은 CSS는 "스크롤된" 클래스가 탐색 모음에 적용될 때 배경색이 흰색(#fff)으로 변경되고 200밀리초에 걸쳐 부드럽게 전환되도록 보장합니다.

이 솔루션을 구현하면 페이지 콘텐츠를 스크롤할 때 시각적 신호를 제공하여 사용자 경험을 향상시키는 동적 탐색 모음입니다.

위 내용은 스크롤 시 Navbar의 배경색을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!