부트 스트랩 4 베타 scrollspy가 작동하지 않음

Question

나는 이것이 this question의 복제라는 것을 알고 있지만 거기에 주어진 대답은 scrollspy 플러그인을 사용하지 않고 대신 스크롤에서 활성 링크를 강조 표시하기 위해 모든 자바 스크립트를 작성하는 것입니다.

나는이 질문의 다른 모든 반복을 찾아 냈지만 내 코드는 주어진 솔루션에서와 똑같아 보여서 문제를 잘 모릅니다. (대부분의 다른 질문은 부트 스트랩 4 베타 버전이 아니라 오히려 이전 버전이기도합니다)

this scrolling nav template의 javascript 파일을 사용하여 링크를 클릭하면 섹션으로 스크롤됩니다. 이것은 작동하므로 링크는 모두 ID에 의해 섹션에 제대로 연결됩니다.

템플릿의 JS 파일에는 내장 된 scrollspy를 활성화하기 위해가 있지만 실제로는 작동하지 않습니다.

본문의 위치는 상대적으로 설정됩니다. jQuery.js 파일은 bootstrap.js 파일 앞에 있습니다.

또한 body 태그에 data-spy 및 data-target을 적용하는 방법을 시도했습니다.

나는이 작업을 수행하기 전후에 .active 클래스의 스타일을 지정했지만 Chrome에서 내 페이지를 검사 한 결과 .active 클래스가 스크롤 될 때 링크에 적용되지 않아 문제가 관련 있다고 생각하지 않습니다. ~ CSS.

$('body').scrollspy({ 
    target: '#mainNav', 
    offset: 0 
    }); 

및 코드 : : 여기

는 자바 스크립트입니다

<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;"> 
    <div class="container-fluid"> 
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarResponsive"> 
    <ul class="navbar-nav"> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a> 
     </li> 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 1

입니다. 이 문제를 해결하기 위해 spyscroll은 주로 에 적용되는 navbar-dark 또는 navbar-light 중 하나에 의존한다는 것을 깨달았습니다. 이것이 문서에 있다면 도움이 될 것입니다! navbar-dark을 적용했는데 .active 상태가 nav-links 또는 nav-items에 연결되어 있다고 가정했기 때문에 nav-links의 스타일을 사용하여 .active 상태가 작동하지 않게되었습니다..active가 & 스타일 받고 어떻게 내 문제를 해결하려면 내가 .navbar-dark li a에 내 사용자 지정 스타일을 적용하고,

.navbar-dark .navbar-nav .active > .nav-link, 
.navbar-dark .navbar-nav .nav-link.show, 
.navbar-dark .navbar-nav .nav-link.active 

에 내 사용자 지정 활성 상태 (이것은 부트 스트랩 CSS에서 당겨졌다, 나는 알아 내기 위해 그것을 통해 검색 이 수업을 복사하여 내 맞춤 CSS 문서에 붙여 넣으십시오.

이렇게하면 다른 사람에게도 비슷한 문제가 발생합니다.

Answer 2

제공된 정보에 기초하여, 실제 문제가 어디에서 오는 분별하기 어렵다. 내 추측으로는 github에서 스크롤하는 nav 템플릿의 종속성을 놓치고있는 것 같지만 잘못된 것일 수 있습니다.

jQuery.easing을 package.json 파일에 포함시키지 않았다면 문제 일 수 있습니다.

코드를 사용하여 codepen 프로젝트에 넣었으며 jQuery 3.2.1 및 jQuery-easing 1.4.1을 사용하여 작동하게 만들 수있었습니다.

here으로 볼 수 있습니다.