I found small problem in scrollspy Bootstrap 5. When windows is resize navigation is not correct and not refresh.
Souce code is from original bootstrap 5
https://v5.getbootstrap.com/docs/5.0/components/scrollspy/#refresh
Uncaught TypeError: Cannot read property 'refresh' of null
demo :
var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})html {
scroll-behavior: smooth;
}
/*margin padding*/
.py-9 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.my-9 {
margin-top: 7rem;
margin-bottom: 7rem;
}
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.py-9 {
padding-top: 7rem;
padding-bottom: 7rem;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<body id="page-top" data-spy="scroll" data-target="#main-nav" data-offset="92">
<!-- ========== { HEADER }========== -->
<header id="main-nav" class="fixed-top nav-dark bg-light border-bottom py-3">
<div class="container">
<!-- Navbar -->
<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light">
<a class="navbar-brand main-logo" href="#">
MY LOGO
</a>
<!-- navbar button -->
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo"
aria-controls="navbarTogglerDemo"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse menu -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav nav-hover1 ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#hero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#one">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#two">Skill</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#three">Progress</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#four">Statistic</a>
</li>
</ul>
<div class="text-center my-3 my-lg-0 ml-0 ml-lg-2">
<a class="nav-link btn btn-primary btn-sm btn-block js-scroll-trigger" href="#five">Download
</a>
</div>
</div><!-- end collapse menu -->
</nav><!-- End Navbar -->
</div>
</header><!-- end header -->
<!-- =========={ MAIN }========== -->
<main id="content" role="main">
<!-- section -->
<section id="hero" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION HERO</h3>
</section>
<!-- section -->
<section id="one" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION ONE</h3>
</section>
<!-- section -->
<section id="two" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION TWO</h3>
</section>
<!-- section -->
<section id="three" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION THREE</h3>
</section>
<!-- section -->
<section id="four" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION FOUR</h3>
</section>
<!-- section -->
<section id="last" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION LAST</h3>
</section>
</main>
<!-- end main -->
<!-- =========={ FOOTER }========== -->
<footer class="py-5 bg-dark">
<p class="text-light text-center">Copyright 2020</p>
</footer>
<!-- End Footer -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</body>Have solution for this problem ?
I just upgraded from alpha version to beta1 and it seems to have fixed that particular issue (make sure to upgrade both css & js components). Not sure if this will solve it for you. I didn't make isolated changes, I made several before I saw it started to work but if I had to guess this would be the one that fixed it.
However, Bootstrap 5's scroll spy is very bugged currently up to the latest release (beta1).
[slightly unrelated]
I actually realized this after struggling with an issue for several days where scrollspy computes faulty offsets for the spied on elements after the page is reloaded when scrolled to any location other than 0. github scollspy page reload issue thread.