请问我这样做的一个楼梯式导航有这种问题怎么解决啊 会重复执行添加隐藏样式

Question

那个我应该是点击的时候添加样式其他兄弟元素隐藏各自的背景样式转跳到他的那个锚点那　然而好像因为我下面的$(window).scroll(function ()函数用来控制滚动条显示隐藏样式给重复执行了 只要点击其他附近的锚点时候 先是隐藏其他兄弟的样式，然后因为滚动条控制兄弟元素的背景再度会显示一遍再隐藏请问我该怎么改啊 我知道我做的很渣没办法每个锚点背景图不同只能用这种死办法QWQ

<div id="menu">

    <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li class="top"></li>

        </ul>

    </div>

#menu{

    width:32px;height:360px;

    position:fixed;

    top:35%;left:50px;

    z-index: 3;

    list-style: none;

    display: none;

}

#menu li{

text-align: center;

margin: 30px auto;

cursor: pointer;

background: url(img/dod.png);

background-size: cover;

width: 10px;

height: 10px;

}

#menu .message{

background: url(img/xinxi.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .jishus{

background: url(img/jineng.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .licheng{

background: url(img/jinli.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .sakuhin{

background: url(img/zuoping.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

#menu .top{

background: url(img/top.png);

background-size: cover;

transform: scale(0);

animation: scales 1s forwards;

}

@keyframes scales{

from{

transform: scale(0);

}

to{

transform: scale(3);

}

}

  

function louti(){

        var _index=0;

        $("#menu ul li:eq(0)").click(function(){

            

            $(this).addClass('message');

            $("#menu ul li:eq(1)").removeClass('jishus');

            $("#menu ul li:eq(2)").removeClass('licheng');

            $("#menu ul li:eq(3)").removeClass('sakuhin');

            //通过拼接字符串获取元素，再取得相对于文档的高度

            var _top=$("#louti1").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

        $("#menu ul li:eq(1)").click(function(){

            

            $(this).addClass('jishus');

            $("#menu ul li:eq(0)").removeClass('message');

            $("#menu ul li:eq(2)").removeClass('licheng');

            $("#menu ul li:eq(3)").removeClass('sakuhin');

            //通过拼接字符串获取元素，再取得相对于文档的高度

            var _top=$("#louti2").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

        $("#menu ul li:eq(2)").click(function(){

            

            $(this).addClass('licheng');

            $("#menu ul li:eq(1)").removeClass('jishus');

            $("#menu ul li:eq(0)").removeClass('message');

            $("#menu ul li:eq(3)").removeClass('sakuhin');

            //通过拼接字符串获取元素，再取得相对于文档的高度

            var _top=$("#louti3").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

        $("#menu ul li:eq(3)").click(function(){

            

            $(this).addClass('sakuhin');

            $("#menu ul li:eq(1)").removeClass('jishus');

            $("#menu ul li:eq(2)").removeClass('licheng');

            $("#menu ul li:eq(0)").removeClass('message');

            //通过拼接字符串获取元素，再取得相对于文档的高度

            var _top=$("#louti4").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

        $("#menu ul li:eq(4)").click(function(){

            $("#menu ul li:eq(0)").removeClass('message');

            $("#menu ul li:eq(1)").removeClass('jishus');

            $("#menu ul li:eq(2)").removeClass('licheng');

            $("#menu ul li:eq(3)").removeClass('sakuhin');

            var _top=$("#louti5").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

        $(".down").click(function(){

            var _top=$("#louti1").offset().top;

            //scrollTop滚动到对应高度

            $("body,html").animate({scrollTop:_top},500);

        });

       

        $(window).scroll(function () { 

        if ($(window).scrollTop() > 800 ) { 

            $("#menu").fadeIn();          

            

        }

        else {

            $("#menu").fadeOut();  

        }

        if ($(window).scrollTop() > 940 && $(window).scrollTop() < 2000) { 

            $("#menu ul li:eq(0)").addClass('message');

        }

        else {

            $("#menu ul li:eq(0)").removeClass('message');

         }

        if ($(window).scrollTop() > 2000 && $(window).scrollTop() < 3000) { 

            $("#menu ul li:eq(1)").addClass('jishus');

        }

        else {

            $("#menu ul li:eq(1)").removeClass('jishus');

         }

        if ($(window).scrollTop() > 3000 && $(window).scrollTop() < 4000) { 

            $("#menu ul li:eq(2)").addClass('licheng');

        }

        else {

            $("#menu ul li:eq(2)").removeClass('licheng');

         }

        if ($(window).scrollTop() > 4000 && $(window).scrollTop() < 5000) { 

            $("#menu ul li:eq(3)").addClass('sakuhin');

        }

        else {

            $("#menu ul li:eq(3)").removeClass('sakuhin');

         }

          

        })

  }

  louti();