부트 스트랩 3 Scrollspy 활성 상태 제거

나는 scrollspy와 고정 헤더가있는 부트 스트랩을 사용하는 사이트가 있습니다. 잘 작동하지만 scrollspy 문제가 발생했습니다. 메인 네비게이션의 일부가 아닌 두 개의 섹션이 페이지에 있습니다. 이 섹션에있을 때 가장 최근의 '활성'링크가 유지됩니다. 가장 쉬운은 바이올린에 문제를 설명합니다 : 부트 스트랩 3 Scrollspy 활성 상태 제거

http://jsfiddle.net/eric1086/R7S9t/1/

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
    <ul class="nav"> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
    </ul> 
</nav> 

<section class="no-spy"> 
    Don't spy me! 
</section> 
<section class="block" id="first"> 
    First 
</section> 
etc...

는 기본적으로 난 단지 네비게이션 바에서 대상 요소가 실제로 보여주는 때 보여 활성 상태를합니다. 어떤 아이디어? 미리 감사드립니다!

출처

2014-04-07 erh86

나에게도 같은 일이 일어났습니다. 내가 한 일입니다.
그것이 최선의 방법인지는 모르겠지만 작동합니다. http://jsfiddle.net/ZGsPm/1/

당신은 (예에서 "무시"참조) 무시 섹션으로 이동 추가 목록 항목을 추가하고 그들에게 클래스를 추가하고 ID :
은 여기 바이올린의 코드입니다.

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
    <ul class="nav"> 
    <li class="ignore"><a href="#no-spy-first"></a></li> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
    <li class="ignore"><a href="#no-spy-second"></a></li> 
    </ul> 
</nav>

그런 다음 해당 항목을 목록 항목에서 참조 할 수 있도록 해당 섹션에 추가합니다.

<section class="no-spy" id="no-spy-first"> 
    Don't spy me! 
</section> 

<section class="block" id="first"> 
    First 
</section> 
... 
<section class="no-spy last" id="no-spy-second"> 
    Don't spy me! 
</section>

그리고 마지막으로, (당신이 scrollspy 함수를 호출 후) 자바 스크립트에서이 도움이

$('.ignore').css({'visibility':'hidden', 'width':'0%'});

희망!

출처

2014-07-31 05:34:07 Javi

감사합니다. 이것은 확실히 작동합니다 - 영리한 해결 방법. 이것은 Scrollspy에서 구현할 수있는 좋은 기능입니다. 목록 항목을 추가 할 필요가 없습니다. – erh86

이 작동하지만'.ignore' 클래스에 필요한 유일한 CSS는'display : none;'입니다. 이렇게하면 nav이 전체 너비와 접힌 상태에서 작동합니다. – 585connor

부트 스트랩 3 Scrollspy 활성 상태 제거

답변

관련 문제