Twitter Bootstrap 스크롤하는 동안 스크롤 기능이 작동하지 않습니다.

스크롤 기능을 테스트하고 있지만 작동하지 않습니다. 스크롤하면 알약이 강조 표시되거나 선택되지 않습니다. http://getbootstrap.com/javascript/#scrollspy에 따르면, HTML 비트가 모두 필요합니다.Twitter Bootstrap 스크롤하는 동안 스크롤 기능이 작동하지 않습니다.

나는 무엇이든지 놓치거나 더 많은 정보를 원한다면 언제든지 물어보십시오!

application.html :

<body data-spy="scroll" data-target="navbar navbar-default"> 
<%= yield %> 
</body>

application.css

body { 
    position: relative; 
}

index.html을

<nav class="navbar navbar-default navbar-fixed-top"> 
    <ul id="nav_pills" class="nav nav-pills" role="tablist"> 
     <li role="presentation"> 
     <a href="#about">About</a> 
     </li> 
     <li role="presentation"> 
     <a href="#services">Services</a> 
     </li> 
     <li role="presentation"> 
     <a href="#portfolio">Portfolio</a> 
     </li> 
     <li role="presentation"> 
     <a href="#contact">Contact</a> 
     </li> 
    </ul> 
    </nav>

출처

2014-11-12 Liondancer

'data-target'에 대한 귀하의 가치가 잘못되었습니다 ... 단지'navbar navbar-default' 대신에'.navbar'가 필요할 수도 있습니다 – DaniP

@Danko This works! 감사! 나는 당신이 1 개를 배치하는 경우에 당신의 응답을 받아 들일 것이다! '.navbar '만 필요한 이유를 설명해 주시겠습니까? 예를 들어, 부트 스트랩 웹 사이트에서 제공 한 것처럼 대상의 정확한 복사본을 필요로하는 것처럼 보였습니다. – Liondancer

여기서 문제는 data-target에 사용하는 값입니다 당신이 ID를 참조하는 경우는 클래스 명 또는 #를 참조하는 경우가 .을 필요로 유효하지 않습니다. = "네비게이션 바 네비게이션 바 - 기본"

그냥 요소의 두 클래스 이름을 언급하지만, 당신이 그것을 통과하기 위해 클래스 명이 있다고 파악해야

데이터 대상 : 생 경우

Jquery 함수의 오른쪽 선택자. 이 여야

데이터 대상 = 공백없이 정상 JQUERY 선택기 같은 . 식별자

"navbar.navbar 기본.". 또한 하나의 클래스 명에이를 단순화 할 수 있습니다 :

데이터 목표 =

확인 올바른 코드이 BottplyDemo "네비게이션 바있다.".

출처

2014-11-12 16:18:58 DaniP

나 자신을 부트 스트랩 오히려 새로 온 사람 만이 문서를 기반으로 나타납니다 자바 스크립트로 scrollspy를 호출해야합니다. 당신이 그 부분을 당신의 모범에서 벗어나지 않는다면 말입니다.

$('body').scrollspy({ target: '.navbar-example' })

출처

2014-11-12 16:04:46

이 방법 중 하나 일뿐입니다. HTML 또는 자바 스크립트를 사용하여 동일한 작업을 수행 할 수 있습니다. – Liondancer

이 방법으로 문서를 읽는 방법도 있지만 가치가 있습니다. 또한 application.html 파일을 제거하고 index.html의 본문 태그에 추가합니다. @ 라이온 댄서 –

Twitter Bootstrap 스크롤하는 동안 스크롤 기능이 작동하지 않습니다.

답변

관련 문제