固定层效果有时不生效

贴出来的代码运行起来感觉还不明显，网页侧边栏的导航，频繁按F5按键会出现侧边栏突然掉下去的情况，也就是

.slide_bar {
            position: absolute;
            z-index: 99;
            right: 30px;
            top: 700px;
        }

这段css生效的情况，是因为JS触发的顺序在CSS后面么？如果是，应该怎么优化，不是的话是什么引起的？

  <!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        .slide_bar {
            position: absolute;
            z-index: 99;
            right: 30px;
            top: 700px;
        }

        .slide_bar img {
            margin-left: -12px;
        }

        .slide_bar ul {
            width: 160px;
            text-align: center;
            padding-top: 30px;
            margin-top: -20px;
            margin-left: 10px;
            background: #4499ff;
        }

        .slide_bar ul li {
            border-bottom: 1px solid #4499ff;
        }

        .slide_bar ul a, .back_top {
            display: block;
            width: 160px;
            font-size: 18px;
            line-height: 40px;
            color: #fff;
        }

        .slide_bar ul a:hover, .quick_try:hover, .check_on {
            background: #2a80e8;
        }
    </style>
    <script>
        $("document").ready(function(){
            //侧边栏定位
            $(window).scroll(function () {
                if ($(window).scrollTop() <= 700) {
                    $(".slide_bar").css({"position": "absolute", "top": "700px"});
                }else if ($(window).scrollTop() > 700) {
                    $(".slide_bar").css({"position": "fixed", "top": "50px"});
                }
            });
        });

    </script>
</head>
<body>
<div class="slide_bar">
    <img src="../images/slider_bar.png">
    <ul>
        <li class="check_on"><a href="javascript:void(0);" target="_blank">XXX</a></li>
        <li><a href="#top_2">1</a></li>
        <li><a href="#top_3">2</a></li>
        <li><a href="#top_4">3</a></li>
        <li><a href="#top_5">4</a></li>
        <li><a href="#top_6">5</a></li>
        <li><a href="#top_7">6</a></li>
        <li><a href="#top_8">7</a></li>
    </ul>
    <a class="back_top" id="back_top" href="javascript:">
        TOP<i class="icon_top icon"></i>
    </a>
</div>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1<h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1>
<h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1>
</body>
</html>

【热门文章】