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>
https://stackoverflow.com/questions/48018769/bootstrap-4-how-to-remove-first-affix-when -second-affix-comes-to-view - @dferenc。接尾辞とscrollspyを使うにはどうすればいいですか？ – Raj