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

스크롤할 때 탐색 표시줄 색상을 변경하는 방법

문제:

투명 배경 설정 페이지를 스크롤할 때 탐색 모음 색상이 작동하지 않아 새로운 배경색이 표시됩니다. 적용되었습니다.

해결책:

스크롤 후 탐색 표시줄 색상을 변경하려면 다음 단계를 따르세요.

1. 자바스크립트를 추가하세요. 머리:

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

2. CSS를 추가하여 탐색 표시줄 스타일 지정:

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

구현:

JavaScript 코드는 페이지 스크롤을 감시합니다. 스크롤이 탐색 모음의 높이를 초과하면 스크롤이라는 클래스가 탐색 모음에 추가됩니다. CSS 코드는 스크롤된 클래스가 있을 때 흰색 배경색으로 탐색 모음 스타일을 지정합니다. 이는 200밀리초에 걸쳐 배경색을 부드럽게 전환합니다.

이 솔루션을 사용하면 탐색 모음이 스크롤되지 않을 때 배경색을 투명하게 설정하고 스크롤이 발생할 때 배경색을 흰색으로 변경할 수 있습니다.

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