스크롤 위치에 따라 탐색 표시줄의 색상을 어떻게 동적으로 변경할 수 있습니까?

스크롤링 시 동적 탐색 표시줄 색상

프로젝트에서 아래로 스크롤한 후 탐색 표시줄이 배경색을 얻는 문제에 대해 언급하셨습니다. . 이 문제를 해결하려면 스크롤 위치에 따라 navbar의 색상을 변경하는 솔루션을 구현할 수 있습니다.

JavaScript 구현:

이를 달성하려면 다음 JavaScript 코드를 추가하세요. HTML 파일의 헤더에 추가:

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

이 스크립트는 스크롤 위치를 지속적으로 모니터링합니다. 스크롤탑 값이 navbar의 높이를 초과하면 navbar에 "scrolled"라는 클래스가 추가되어 색상 변경이 시작됩니다.

CSS 스타일링:

To 탐색 모음의 색상을 업데이트하고, 스타일시트를 만들고, 다음 CSS를 포함합니다.

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

"#fff" 값은 원하는 색상으로 맞춤 설정할 수 있습니다. "스크롤된" 클래스가 navbar에 적용되면 배경색이 흰색으로 부드럽게 전환됩니다.

예:

기능을 설명하려면 다음을 참조하세요. 다음 JsFiddle:

[JsFiddle Link]

이 예에서는 아래로 스크롤하면 탐색 표시줄이 흰색으로 변합니다. 이 솔루션을 구현하면 스크롤 위치에 따라 탐색 모음의 색상을 동적으로 효과적으로 변경할 수 있습니다.

위 내용은 스크롤 위치에 따라 탐색 표시줄의 색상을 어떻게 동적으로 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!