It is possible to track Scrollspy activity with the activate.bs.scrollspy event. The docs uses the sample below.
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something…
})
However, it is not documented, that when the Scrollspy is used on the <body> element, the activate.bs.scrollspy event will be triggered on the window object as opposed to [data-spy="scroll"]. So in your case, you could watch for this event as in the example below, and once the last element is reached 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');
}
});
Please note, that in order to have an event fired when .remove-fix is reached, you need to include it in your navbar menu too. Therefore you will need to set an id for it too. The menu item could be hidden though.
This is the full working example:
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>
