부울 탐색 모음의 스크롤시 가로선 추가

Question

페이지를 스크롤 할 때 부울 탐색 모음에 가로선을 추가해야합니다. 간단히 말해서, 페이지로드 및 탐색 표시 줄이 맨 위에있을 때 줄이 보이지 않아야하지만 사용자가 페이지를 아래로 스크롤하면 navbar의 눈에 띄는 하단 라인이 있어야합니다.

웨이 포인트와 같은 다양한 라이브러리를 통해이 작업을 수행하는 것이 가능하다는 것을 알고 있지만, 가장 간단하고 명확한 방법으로 jquery 또는 boostrap을 사용하는 것이 가장 이상적입니다.

당신이 당신의 메뉴 바는 "네비게이션 바"의 ID를 가지고 가정

Answer 1

<style> 
    .scrolled {border-bottom:1px solid #000;}  
</style> 

$(document).scroll(function(){ 
    $('#navbar').toggleClass('scrolled', $(this).scrollTop() > 1); 
}); 

을 :) 감사합니다.

이렇게하면 1 픽셀 아래로 스크롤 할 때마다 navbar에 '스크롤 된'클래스가 추가되어 CSS에서 스타일을 지정할 수 있습니다. 페이지 상단으로 돌아 가면 사라집니다.