CSS - 부트 스트랩 Scrollspy - 섹션 배경색에 따라 색상을 변경하는 방법

Question

scrollspy가있는 부트 스트랩 nav을 배경 색상없이 고정 시켰습니다.

아래로 스크롤하면 다른 배경색으로 다른 섹션이 생깁니다.

그럼 nav의 글꼴 색상을 섹션 배경과 대비하여 변경하는 솔루션이 필요합니다.

저는 CSS에 익숙하지 않습니다. 그렇다면 미안하지만 거짓 질문입니까? -이 방법이 있습니까?

각 섹션의 탐색 글꼴을 변경 하시겠습니까?

AND, 그것의 가능한

TKS (I 다른 탐색 메뉴가 홈 섹션 같은) 일부 섹션의 네비게이션 바 숨길!

Answer 1

좋아요. 그래서 제가 예제를 만들었습니다. 나는 이것이 당신이 찾고 있던 무슨 희망 :

http://jsfiddle.net/gpcasx24/3/

자바 스크립트의 다음 조각 검사 (jQuery를 필요) 할 때 사용자가이 무엇인지 섹션 새로운 섹션과 수표를 입력 scrollspy 사항. 섹션의 이름을 추출하고 배열을 ColorForSection에서 정의 할 수 있습니다.

// Change this to define your colors. Can also be rgb(0,0,0) etc 
var ColorForSection = { 
    '#moose': '#ff0000', 
    '#bear': "#00ff00", 
    '#beaver': "#0000ff", 
    '#raccoon': "#ffff00", 
    '#bobcat': "#00ffff", 
} 

// Change the navbar's link color to a defined one based on the active nav link 
function ChangeNavColor() { 
     // Get the section name from the navbar' now active URL 
    var currentSection = $(".nav li.active > a").attr('href'); 
    // Set the link color 
    $(".nav a:link").css('color', ColorForSection[currentSection]); 
} 

// When scrollspy activates a new section, execute the ChangeNavColor function 
$(document).on('activate.bs.scrollspy', ChangeNavColor); 

// Call the function when the navbar's done loading 
// So we also have the correct color to begin with. 
$('.nav').ready(ChangeNavColor); 

귀하의 링크의 href가이 #blabla가 아닌 경우, 지금 날 수 있도록 내가 코드를 변경할 수 있습니다!
사용이 코드 조각 : :이 toggleClass는 다음과 같이 작동

// Execute the function when the page is scrolled 
$(document).scroll(function() { 
    // Get the navbar 
    var nav = $('nav'); 
    // Enable the class 'hidden' if scrollTop is lower or equal to 2 
    nav.toggleClass('hidden', $(document).scrollTop() <= 2); 
}); 

때 페이지 상단

는 메뉴 바 숨기기. 두 번째 매개 변수에서 true 또는 false으로 표시되는 '숨김'및 표시 여부를 알 수 있습니다.

$(document).scrollTop() <= 2
스크롤 량이 2 픽셀 미만인지 확인합니다. 절대 상단에 숨기려면이 값을 0으로 변경하면됩니다.
섹션의 높이를 2로 변경하십시오. 시도
다음 :

특정 섹션에 대한 메뉴 바 숨기기

// Sections to hide the nav in 
var HideNavInSections = [ 
    '#moose' 
]; 

// Hide nav for specified sections 
function HideNavOnScroll() { 
    // Get the section name from the navbar' now active URL 
    var currentSection = $(".nav li.active > a").attr('href'); 
    // Should we hide the nav in this section? 
    $('.nav').toggleClass('hidden', HideNavInSections.indexOf(currentSection) != -1); 
} 

// When scrollspy activates a new section, execute the HideNavOnScroll function 
$(document).on('activate.bs.scrollspy', HideNavOnScroll);