스크롤 시 Navbar 배경색을 변경하는 방법은 무엇입니까?

Navbar 색상 포스트 스크롤 수정

질문:

배경을 어떻게 제거할 수 있나요? 처음에는 탐색 모음에서 색상을 지정한 다음 스크롤하면 새 색상을 추가합니다.

시나리오:

문제의 웹사이트 https://attafothman.olympe.in/에는 상단에 고정된 상태를 유지해야 하는 검은색 navbar가 있습니다. 위치. 그러나 특정 div 아래로 스크롤하면 navbar가 자동으로 새로운 배경색을 얻습니다.

해결책:

이 문제를 해결하려면 JavaScript와 CSS의 조합 ~이다

JavaScript:

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

이 JavaScript 코드는 스크롤 시 이벤트 리스너를 트리거합니다. 스크롤 위치가 탐색 모음 높이를 초과하면 'scrolled'라는 사용자 정의 CSS 클래스가 요소에 추가됩니다.

CSS:

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

이 CSS 규칙은 '스크롤된' 클래스의 동작을 정의합니다. 'scrolled' 클래스가 추가되면 'navbar-fixed-top' 클래스가 있는 요소에 흰색 배경색을 할당합니다. '!important' 키워드를 사용하면 이 규칙이 충돌하는 스타일을 재정의합니다.

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