Flickering Sticky Navigation
MamounAlsmaiel opened this issue · comments
Bug Report
Description
The sticky navigation bar on the demo site (https://www.bootstrap-package.com/) behaves erratically, flickering when the page is scrolled down slightly. This creates a visually unsettling effect, as if the navigation bar is trying to reposition itself constantly. see attachment
Steps to Reproduce
- Visit the Bootstrap Package demo site at https://www.bootstrap-package.com/.
- Scroll down slightly.
- Observe the behavior of the sticky navigation bar.
Temporary Solution and Observation:
- The issue was initially observed when the minified JS file (
bootstrap.stickyheader.min.js
) was in use. - Replacing the minified JS file with the normal JS file (
bootstrap.stickyheader.js
) resolved the flickering issue. - This suggests that the problem might be associated with the minification process or the specific content of the
bootstrap.stickyheader.min.js
file.
Screenshots
I recommend a review of the minification process or the content of the bootstrap.stickyheader.min.js
file to identify and address the cause of this flickering issue.
Versions
bootstrap_package 14.0.7
Here js adds navbar-transition class to an element with navbar-fixed-top class if you scroll down 120 px...
It is at the 120 px point that the jumps occur.
The navbar-transition class itself:
@media (min-width: $grid-float-breakpoint) {
.navbar {
transition: all .27s cubic-bezier(0, 0, .58, 1) 0s;
}
....
}
To smooth out the bounces, I overridden the transition in my SCSS as::
@media (min-width: 992px) {
.navbar {
transition: all 1s cubic-bezier(0, 0, 0.58, 1) 1s !important;
}
}
My observations are:
Only occurring in Chrome and Edge, not occurring in Firefox.
Also occurring when using bootstrap.stickyheader.js
CSS fix by @aksenovaa didn't help.
My solution is:
Don't remove class "navbar-transition" immediately when window.scrollY is below 120, but remove this class when user scrolled all up.
120 < window.scrollY ? stickyheader[0].classList.add("navbar-transition") : '';
0 === window.scrollY ? stickyheader[0].classList.remove("navbar-transition") : '';