Incorrectly pinned when scrolling fast to bottom of page

[PonchoPowers]

Incorrectly pinned when scrolling fast to bottom of page

https://bon-evaluategroup.tinytake.com/tt/Mzc0MDEwNF8xMTM4OTEyOA

(function () {
    $(document).ready(function () {
        var header = $(".header");

        if (header.length < 1) return;

        function showHeader() {
            header.animate({ height: header.attr("data-height") + "px" }, function () {
                setTimeout(function () {
                    // Remove the height declaration to avoid any issues
                    // adding elements to the header.
                    header.css("height", "auto");
                }, 50);
            });
        }

        function hideHeader() {
            header.attr("data-height", header.height());
            header.animate({ height: 0 });
        }

        new Headroom(header[0], {
            scroller: $(".scroller")[0],
            onPin: showHeader,
            onNotTop: hideHeader
        }).init();
    });
}());

If you can't reproduce I'll post the HTML and CSS too as I'm using flexboxes.

[PonchoPowers]

Either download the video or fullscreen it and watch for the bar at the top with the text fixed, and observe the DOM to see the issue. I haven't looked at the source code yet to identify the exact course but it looks like a bug with the JavaScript to me.

[PonchoPowers]

This isn't a bug, it is to do with the way in which the header is added to the page, causing the page to scroll up, making the header appear again. Fixed using the tolerance.