Home page header flashes when scrolled to a certain position

[lneugebauer]

Bug Report

Prerequisites

• [ ] Can you reproduce the problem on TYPO3 v11.5 LTS
• [ ] Can you reproduce the problem on TYPO3 v12.4 LTS
• [x] Did you perform a cursory search to see if your bug or enhancement is already reported?

Description

When slowly scrolling on bootstrap-package.com the page header starts flashing. See attached screen recording.

Steps to Reproduce

1. Open bootstrap-package.com
2. Slowly scroll down
3. See strobe effect

Expected behavior

The animation should probably be started at the starting pixel threshold and not be constrained to the current scroll position.

Actual behavior

The animation is constrained to the scroll position which causes the page header to flicker.

Screenshots

https://github.com/benjaminkott/bootstrap_package/assets/25110308/99b3b319-437d-42d6-9ce9-b64a048ccd0d

Versions

https://www.bootstrap-package.com/

[Hawkeye1909]

I've had this flickering in a project as well. The problem is the mechanism by which the class 'navbar-transition' is added. I ended up editing the funtion animateHeader in bootstrap.stickyheader.js to look like this:

function animateHeader() {
    if (window.scrollY >= stickyheader[0].getBoundingClientRect().bottom && !stickyheader[0].classList.contains("navbar-transition")) {
        stickyheader[0].classList.add("navbar-transition");
    } else if (window.scrollY < stickyheader[0].getBoundingClientRect().bottom && stickyheader[0].classList.contains("navbar-transition")) {
        stickyheader[0].classList.remove("navbar-transition");
    }
}

[bznovak]

@Hawkeye1909 This fix did not work for me.