css写浮动导航下拉会闪烁解决方法

最近在用element ui做后台管理系统，左侧菜单比较多了，所以需要拉动网页滚动条才可以看完整个菜单，
所以就把顶部导航浮动 fixed后 到一定高度就浮动起来，
但是中途遇到一个大坑，就是在浏览器中，滚动发高度刚好在导航需要浮动的高度山下不断 上下滑动滚动条的时候 ，页面会出现不断的闪烁，不知道大家有没有遇到个这样的bug
好了 不批话多了，直接看解决方法
重点来了。。。。。。。。
尼玛重点在那点啊。。

接到往下来 就是在我浮动的导航div外面在包一层div 就觉得了

            <div id="navbig">
                <div style="width: 100%;overflow: hidden;" class="item_header">
                    <div class="item_left">
                        <div class="item_logos">
                            <div class="item_title" v-show="!isCollapse">管理系统</div>
                            <div class="item_title" v-show="isCollapse">
                                <img style="width: 40px; height: 40px;" src="../assets/images/user-default.png" alt="" />
                            </div>
                            <div>
                                <el-radio-group v-model="isCollapse" style="color:#ffffff;">
                                    <i v-show="!isCollapse" style="color:#ffffff;" class="el-icon-s-fold expandBtn" @click="isCollapse = true"></i>
                                    <i v-show="isCollapse" style="color:#ffffff;" class="el-icon-s-fold shrinkBtn" @click="isCollapse = false"></i>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="item_path">
                        <ul class="item_litens">
                            <li v-for="(items,index) in menulist" :key="index" :class="{ isactive: current == index }" @click="gotoPath(items, index)">
                                <i :class="items.icon"></i>{{ items.menuName }}</li>
                        </ul>
                    </div>
                    <div class="item_right">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link home_userinfo" style="display: flex;align-items: center;color:#fff">
                                {{username}}
                                <img src="../assets/images/user-default.png" style="width: 40px;height: 40px;margin-right: 5px;margin-left: 5px;border-radius: 40px" />
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="editpwd">修改密码</el-dropdown-item>
                                <el-dropdown-item command="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-header>
###看看js代码
        scrollHandle(e) {
                // console.log('滚动高度',window.pageYOffset)
                // console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)
                // console.log(9999)
                let top = document.body.scrollTop; // 获取页面滚动高度
                let topScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var navbig = document.getElementById("navbig"); //获取到导航栏id
                if (topScroll >= 80) {
                    navbig.style.position = 'fixed';
                    navbig.style.top = '0';
                    navbig.style.left = '0';
                    navbig.style.right = '0';
                    navbig.style.zIndex = '999';

                } else {
                    navbig.style.position = 'static';

                }

            },

css代码：#navbig {
        width: 100%;
        height: 80px;
        background-color: $header-color;
    }

完事了 ok了  抖动问题解决了！