부트 스트랩 Scrollspy는 마지막 섹션이 스크롤 할 때 고정 메뉴를 제거합니다.

마지막 섹션을 스크롤 할 때 Scrollspy를 제거하는 방법.부트 스트랩 Scrollspy는 마지막 섹션이 스크롤 할 때 고정 메뉴를 제거합니다.

<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> 
     <ul class="navbar-nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="#section1">Section 1</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#section2">Section 2</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#section3">Section 3</a> 
      </li> 
     </ul> 
    </nav> 

    <div id="section1" class="container-fluid bg-success" 
     style="padding-top:70px;padding-bottom:70px"> 
    </div> 

    <div id="section2" class="container-fluid bg-warning" 
     style="padding-top:70px;padding-bottom:70px"> 
    </div> 

    <div id="section3" class="container-fluid bg-secondary" 
     style="padding-top:70px;padding-bottom:70px"> 
    </div> 

    <section class="remove-fix" style="height:600px;"> 
    </section> 
</body>

어떻게 수정 메뉴를 제거하고 클래스 .remove-fix과 마지막 부분에 도달 한 후 정상 스크롤을 할 수있는 : 여기 내 예제 코드인가?

출처

2017-12-26 Raj

activate.bs.scrollspy 이벤트로 Scrollspy 활동을 추적 할 수 있습니다. 문서는 아래 샘플을 사용합니다.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function() { 
    // do something… 
})

그러나, Scrollspy가 <body> 요소를 사용하는 경우 [data-spy="scroll"] 반대의 activate.bs.scrollspy 이벤트가 window 개체에 트리거됩니다, 문서화되어 있지 않습니다. 따라서 귀하의 경우에는 아래 예와 같이이 이벤트를 볼 수 있고 마지막 요소 인 destroy the Scrollspy에 도달하면이를 볼 수 있습니다.

// Basic configuration 
var lastElementSelector = '#section3'; 

// Watching for 'activate.bs.scrollspy' on the `window` 
$(window).on('activate.bs.scrollspy', function (event, active) { 
    // If the activated element is the last one, do the necessary things 
    if (active.relatedTarget === lastElementSelector) { 
     // Destroy Scrollspy functionality 
     $('[data-spy="scroll"]').scrollspy('dispose'); 

     // Remove `.fixed-top` from navbar 
     $('.navbar').removeClass('fixed-top'); 
    } 
});

이벤트를 위해 .remove-fix에 도달하면, 당신도 당신의 메뉴 바 메뉴에 포함 할 필요가 해고 있음을 유의하시기 바랍니다. 따라서 ID를 설정해야합니다. 메뉴 항목을 숨길 수 있습니다.

var lastElementSelector = '#remove-fix'; 
 
$(window).on('activate.bs.scrollspy', function (event, active) { 
 
    if (active.relatedTarget === lastElementSelector) { 
 
     $('[data-spy="scroll"]').scrollspy('dispose'); 
 
     $('.navbar').removeClass('fixed-top'); 
 
    } 
 
});

<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
 
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> 
 
     <ul class="navbar-nav"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#section1">Section 1</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#section2">Section 2</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#section3">Section 3</a> 
 
      </li> 
 

 
      <!-- Hidden menu items to track `#remove-fix` --> 
 
      <li class="d-none"> 
 
       <a class="nav-link" href="#remove-fix">Remove fix</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 

 
    <div id="section1" class="container-fluid bg-success" 
 
     style="padding-top:70px;padding-bottom:70px"> 
 
    </div> 
 
    <div id="section2" class="container-fluid bg-warning" 
 
     style="padding-top:70px;padding-bottom:70px"> 
 
    </div> 
 
    <div id="section3" class="container-fluid bg-secondary" 
 
     style="padding-top:70px;padding-bottom:70px"> 
 
    </div> 
 

 
    <section id="remove-fix" style="height:700px;"> 
 
    </section> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
</body>

출처

2017-12-26 18:39:34 dferenc

https://stackoverflow.com/questions/48018769/bootstrap-4-how-to-remove-first-affix-when :

이 전체 작업 예입니다 -second-affix-comes-to-view - @dferenc. 접미사 및 스크롤 피쉬 사용 방법은 무엇입니까? – Raj

부트 스트랩 Scrollspy는 마지막 섹션이 스크롤 할 때 고정 메뉴를 제거합니다.

답변

관련 문제