javascript - Shrinking sticky sticky header causes flicker in BlinkWebkit at certain scroll positions - Stack Overflow

admin管理员组

文章数量:1304951

I have a sticky header which utilizes IntersectionObserver to gain a class when stuck, which then hides a few elements and reduces the size of the logo. Of course, when the height of the header shrinks, so does the scroll height, and so if you scroll down just enough to shrink the header, it shrinks, then realizes it's no longer stuck so grows, but that cause it to shrink again, so it grows, and so on in an infinite loop. This seems to be most egregious in Chrome, but I've seen it happen in Firefox as well (though Firefox seems to recognize what's happening and sorts itself out).

I've tried numerous things, including a setTimeout() to delay when the class gets removed, adding equivalent margin-bottom to the header when it shrinks, displaying a hidden element with a height of the shrunk space, but nothing seems to fix this problem.

I know I've seen this on other sites before as well, and I suspect this is just a systemic problem with shrinking headers, but is there anything I can do to prevent this from happening? I'm out of ideas.

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS and markup is a bit more plicated (and slightly irrelevant), so if needed, please refer to our demo site here. /

If anything else is needed I'd be happy to add it.

EDIT 1: I see this answer suggests putting a container around the element that retains the correct height, but that won't work with position: sticky; as position: sticky; only works for the closest container (unless someone knows how to get around this?)

EDIT 2: I was overthinking the answer from my first edit

I have a sticky header which utilizes IntersectionObserver to gain a class when stuck, which then hides a few elements and reduces the size of the logo. Of course, when the height of the header shrinks, so does the scroll height, and so if you scroll down just enough to shrink the header, it shrinks, then realizes it's no longer stuck so grows, but that cause it to shrink again, so it grows, and so on in an infinite loop. This seems to be most egregious in Chrome, but I've seen it happen in Firefox as well (though Firefox seems to recognize what's happening and sorts itself out).

I've tried numerous things, including a setTimeout() to delay when the class gets removed, adding equivalent margin-bottom to the header when it shrinks, displaying a hidden element with a height of the shrunk space, but nothing seems to fix this problem.

I know I've seen this on other sites before as well, and I suspect this is just a systemic problem with shrinking headers, but is there anything I can do to prevent this from happening? I'm out of ideas.

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS and markup is a bit more plicated (and slightly irrelevant), so if needed, please refer to our demo site here. https://gepl.myweblinx/

If anything else is needed I'd be happy to add it.

EDIT 1: I see this answer suggests putting a container around the element that retains the correct height, but that won't work with position: sticky; as position: sticky; only works for the closest container (unless someone knows how to get around this?)

EDIT 2: I was overthinking the answer from my first edit

• javascript
• css
• resize
• sticky
• intersection-observer

Share Improve this question Follow edited Nov 5, 2021 at 15:25 JacobTheDev asked Nov 5, 2021 at 15:02 JacobTheDevJacobTheDev 18.6k2929 gold badges102102 silver badges161161 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Well, that was a surprisngly obvious solution... Thanks to this answer, I was able to figure out that if I just set a fixed height on the sticky element, but let the contents of that element shrink, the issue goes away.

Essentially:

<div class="sticky-block" style="height:140px;">
    <div class="header-block">
        ...
    </div>
    <div class="navigation-block">
        ...
    </div>
</div>

In my case these solutions didn't work, Chrome on Android still had the flickering issue. My solution was to make my header position fixed and have a dummy div behind it that resizes to be the same height as the header.

<html>

<head>
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        :root {
            --lightGrey: #bbbbbb;
        }

        body {
            margin: 0;
            width: 100%;
            height: 500%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(9, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }

        header {
            width: 100%;
            grid-area: 1 / 1 / 1 / 4;
            position: fixed;
            top: 0;
            z-index: 100;
            background-color: var(--lightGrey);
        }

        .headerBackground {
            grid-area: 1 / 1 / 1 / 4;
            background-color: var(--lightGrey);
            height: fit-content;
        }
    </style>
</head>

<body>
    <header>My Header</header>
    <div class="headerBackground">Background div</div>
</body>

<script>
    // Changes the header once you have scrolled down by 100 pixels or more
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 100) {
            $('header').css('height', '20vw');
            $('header').css({ 'font-size': '4vw', 'padding': '5vw' });
        } else if ($(window).scrollTop() == 0) {
            $('header').attr('style', '');
        }
    });

    // This keeps the space behind the header at the same height as the header to get around the flickering sticky 
    $(".headerBackground").css({ 'height': ($("header").height() + 'px') });
</script>

</html>

To avoid setting a fixed height on the sticky element, you can implement a buffer around the threshold. Allow the header to grow only when the scroll position exceeds the threshold + buffer, and shrink only when it falls below the threshold - buffer. To determine the direction (whether the header should grow or shrink), you can track the current state of the header (shrunk or expanded).

Example using Svelte:

<script lang="ts">
    let yScroll = $state(0);
    let threshold = 50;
    let buffer = 40;
    let isShrunk = $state(false);

    $effect(() => {
        if (yScroll >= threshold + buffer) {
            isShrunk = true;
        } else if (yScroll <= threshold - buffer) {
            isShrunk = false;
        }
    });
</script>

<svelte:window bind:scrollY={yScroll} />

<header class="transition-all duration-500 {isShrunk ? 'h-16' : 'h-32'}">Header</header>

本文标签：