Flickering Sticky Navigation

[MamounAlsmaiel]

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

1. Visit the Bootstrap Package demo site at https://www.bootstrap-package.com/.
2. Scroll down slightly.
3. 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

[aksenovaa]

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;
  }
}

[SventB]

My observations are: Only occurring in Chrome and Edge, not occurring in Firefox. Only 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") : '';

[Patta]

Duplicate issue. The solution from https://github.com/benjaminkott/bootstrap_package/issues/1424#issuecomment-1771039674 is also working.