Delay of page rendering after element style change in webapp

The problem with

is roughly as follows:
there is a list page with a title bar in the middle. When I pull up a certain distance, the title bar is fixed and suspended at the top, and when pulled down a certain distance, it is put back to its original position. The
list also refers to the isscroll pull-up load and drop-down refresh plug-in. At the same time, the page is rendered by the referenced vue framework.
the dome structure of the page is as follows:

<style>
.fix_nav.fixed{
    position:fixed;
    top:0,
}
</style>

    <div id="app" class="contianer">
                <div class="banner" style="height: 200px;">...</div>
                <div id="fix_nav" v-bind:class="{"fixed":check_hide}"></div>
                <ul class="list">
                    <li>...</li>
                    ...
                </ul>
            </div>

here I have encountered another pit:

after introducing the isscroll plug-in, listen to the sliding distance of the page and switch the fixed style class for the fix_nav element:

onScrollMove: function() {
                if(this.y <= -vm.banner_height) {
                //banner
                    Vue.nextTick(function(){
                        vm.check_hide = true;
                    })
                } else {
                //
                    Vue.nextTick(function(){
                        vm.check_hide = false;
                    })
                }
            },

there is no logical problem, but when debugging on chrome, I found that fix_nav was not suspended (style fixed was successfully added, but when reviewing the element, it was found that the element still followed the contianer box and scrolled off the screen). My estimate is that vue did not trigger page rendering after updating the check_hide attribute, and then I used vue"s Vue.set method to trigger page rendering, but it didn"t work.

finally, I changed the implementation, that is, I copied the fix_nav node, suspended on the top and hidden by default: the dome structure is as follows:

<div id="app" class="contianer">
                <div id="fix_nav fixed" v-bind:class="{"hide":!check_hide}"></div>
                <div class="banner" style="height: 200px;">...</div>
                <div id="fix_nav" v-bind:class="{"hide":check_hide}"></div>
                <ul class="list">
                    <li>...</li>
                    ...
                </ul>
            </div>

this idea is to directly switch the display and hiding of fix_nav fixed and fix_nav elements;

although it has achieved the effect, it still has some shortcomings:
when you swipe the page up and down quickly, you will obviously see the delay effect of switching between fix_nav fixed and fix_nav elements (such as pulling up quickly. When the sliding distance reaches the critical value, the element fix_nav fixed will wait for the page to continue to slide for a certain distance before it is displayed abruptly. On the contrary, when the page is pulled down quickly, The fix_ navelement also has the problem of delayed display.

the content is a little complicated, and it is not convenient for the picture above. I hope you can understand:

ask the gods, how to solve this situation?