webapp中元素样式改变后页面渲染的延时问题

Question

出现问题的情形大致如下：
有一个列表页面，中间有一个标题栏，当我向上拉动一定距离时，该标题栏固定悬浮在顶部，向下拉动一定距离时，放回到原来位置。
列表又引用了isscroll的上拉加载，下拉刷新插件。同时，页面是引用的vue框架渲染的。
页面dome结构如下：

<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>

这里我又 遇到了一个坑：

在引入isscroll插件后，监听页面滑动距离，给fix_nav元素切换fixed样式类：

onScrollMove: function() {
                if(this.y <= -vm.banner_height) {
                //滚动到banner盒子高度时，悬浮
                    Vue.nextTick(function(){
                        vm.check_hide = true;
                    })
                } else {
                //还原
                    Vue.nextTick(function(){
                        vm.check_hide = false;
                    })
                }
            },

逻辑上没有任何问题，但是在chrome上调试时，发现fix_nav并没有悬浮（样式fixed是成功添加上的，但是在审查元素时，发现元素仍然跟随contianer盒子滚动到屏幕以外去了），而我的估计是vue在更新check_hide属性后，并未触发页面渲染，而后我用vue的Vue.set方法，想去触发页面渲染，任然无效。

最后我转换了实现方式，就是再复制fix_nav节点，悬浮在顶部并默认隐藏：dome结构如下：

<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>

这个思路是直接切换fix_nav fixed和fix_nav两个元素的显示隐藏即可；

虽然达到效果了，但是仍然有不足：
当快速上下滑动页面时，会很明显的看到fix_nav fixed和fix_nav两个元素之间切换的延时效果（比如快速向上拉动，当滑动距离达到临界值时，fix_nav fixed这个元素会等页面继续滑动一定距离后才会很突兀的显示出来，相反，快速下拉时，fix_nav元素也会出现延时显示的问题）；

内容有点繁杂，也不便上图，望各位理解：

问一下大神们，如何解决这个状况？