固定位置的左导航（有瑕疵）

html：

<div class="left-menu fl">
                <h3><a href="" title="">Top学院</a></h3>
                <ul>
                    <li class="on">
                        <a href="" title="">学院简介</a>
                        <i class="xia"></i>
                        <ul class="menu-list">

                        </ul>
                    </li>
                    <li>
                        <a href="" title="">组织架构</a>
                        <i class="xia"></i>
                        <ul class="menu-list">
                            <li><a href="" title="">理事会</a></li>
                            <li><a href="" title="">学术委员会</a></li>
                            <li><a href="" title="">管理团队</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" title="">校园生活</a>
                        <i class="xia"></i>
                        <ul class="menu-list">
                            <li><a href="" title="">校园环境</a></li>
                            <li><a href="" title="">服务设施</a></li>
                            <li><a href="" title="">悉尼生活</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" title="">安全信息</a>
                        <i class="xia"></i>
                        <ul class="menu-list">

                        </ul>
                    </li>
                </ul>
            </div>

css：

section.top{
    position: relative;
}
div.left-menu{
    width: 248px;
    position: relative;
    /*top:20px;
    left:16.66%;*/
}
div.left-menu h3 a{
    display:block;
    width: 100%;
    background-color:#ab0801;
    color: #fff;
    padding-left:30px;
    font-size:24px;
    line-height:68px;
    margin-top: 16px;
}
div.left-menu  ul a{
    display:block;
    width: 100%;
    color: #333;
    padding-left:30px;
    border:1px solid #f5f5f5;
}
div.left-menu  ul  li{
    width: 100%;
    font-size:18px;
    line-height:56px;
    margin-top: 6px;
    position: relative;
}
div.left-menu  ul  li i{
    height:56px;
    width: 31.25%;
    background:url(../images/xia.png) no-repeat center;
    position: absolute;
    top:0;
    right: 0;
    z-index: 2;
    cursor: pointer;
}
div.left-menu  ul  li.on >a,div.left-menu  ul  li a:hover{
    color: #fff;
    background-color:#ab0801;
}
div.left-menu  ul  li.on i,div.left-menu  ul  li a:hover ~ i{
    background:url(../images/xia1.png) center no-repeat;
}
div.left-menu  > ul > li > ul{
    display:none;
}
div.mian{
    min-height:1000px;
}

js：

<script src="js/jquery-3.3.1.js"></script>

<script>
            $(document).ready(function(){
            var current = 0;
              $("div.left-menu .xia").click(function(){
              // 二级栏目显示与隐藏
                $("div.left-menu .menu-list").slideToggle("slow");
                // 右侧图标旋转
                 current = (current+180)%360;
                $("div.left-menu .xia").eq($(this).index()-1).css({"-moz-transform":"rotate("+current+"deg)","-webkit-transform":"rotate("+current+"deg)","transform":"rotate("+current+"deg)"});

              });
              // 没有ul时移除图标
               $('.left-menu .menu-list').each(function(index, el){
                        if($(this).children("li").length==0){
                        $(this).siblings('i').remove();
                        }
                    })
               //左侧导航固定
               $(window).scroll(function (){
                var st = $(this).scrollTop();
                console.log(st)
                if(st>=200){
                    $("div.left-menu").css({
                        "position": "fixed",
                         "top":"20px",
                         "left":"16.66%"

                    });
                }else {
                    $("div.left-menu").css({
                        "position": "relative",
                         "top":"0",
                         "left":"0"
                    });
                }
            });
            });
        </script>