Vue stickey adsorption effect

this effect:

it can be realized by using positions:sticky, but the compatibility is too poor. The current idea is to use js to judge the height of the scroll bar in the area + fixed, but the specific implementation steps have not been clearly thought out, and it is rather confusing. I hope to find a demo or a more detailed train of thought

Javascript vue.js css

Nov.09,2021

write a demo, in jq. Please refer to

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: orange;
        text-align: center;
    }

    header.active {
        position: fixed;
        top: 0;
        left: 0;
    }

    div {
        width: 100%;
        height: 300px;
        padding-top: 50px;
        position: relative;
    }
    </style>
</head>

<body>
    <div class="header">
        <header>1</header>
    </div>
    <div class="header">
        <header>2</header>
    </div>
    <div class="header">
        <header>3</header>
    </div>
    <div></div>
    <div class="header">
        <header>4</header>
    </div>
    <div class="header">
        <header>5</header>
    </div>
    <div class="header">
        <header>6</header>
    </div>
</body>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
    $('header').each(function(index, event) {
        $(this).css({ 'z-index': index + 1 });
    });
    
    $(document).scroll(function() {
        $('.header').each(function(index, event) {
            var _this = $(this).find('header');
            if ($(window).scrollTop() - $(this).offset().top >= 0) {
                $(_this).addClass('active');
            } else {
                $(_this).removeClass('active');
            }
        });
    });
})
</script>

</html>

Previous: Php Mini Program development, save sessionid a doubt.

Next: Using array_filter function in thinkphp5