2019.11.18 右侧导航（滚动监听）

html：

<div class="ycdh">
            <div class="yc">
                <div class="dianwai dw1">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">首页</p>
                </div>
                <div class="dianwai dw2">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">新闻</p>
                </div>
                <div class="dianwai dw3">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">英雄</p>
                </div>
                <div class="dianwai dw4">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">社团联合会</p>
                </div>
                <div class="dianwai dw5">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">视频</p>
                </div>
                <div class="dianwai dw6">
                    <div class="dian"></div>
                </div>
                <div class="cheng">
                    <p class="nana">信息</p>
                </div>
            </div>
            <div class="ycde">
                <div class="cheng2">
                    <p class="ycde1">首页</p>
                </div>
                <div class="cheng2">
                    <p class="ycde2">新闻</p>
                </div>
                <div class="cheng2">
                    <p class="ycde3">英雄</p>
                </div>
                <div class="cheng2">
                    <p class="ycde4">社团联合会</p>
                </div>
                <div class="cheng2">
                    <p class="ycde5">视频</p>
                </div>
                <div class="cheng2">
                    <p class="ycde6">信息</p>
                </div>
            </div>
        </div>

css：

.ycdh {
    position: relative;
    display: none;
    z-index: 2;
    height: 390px;
    position: fixed;
    top: 60px;
    right: 0;
    color: white;
}

.yc {
    z-index: 3;
    position: relative;
    margin-top: 15px;
    font-size: 16px;
    text-align: center;
    height: 100px;
    width: 100px;
    transition: all ease .3s;
}

.dianwai {
    z-index: 2;
    position: relative;
    height: 64px;
}

.dianwai:hover {
    cursor: pointer;
}

.dian {
    margin-left: 47px;
    width: 8px;
    height: 8px;
    border: 2px #fff solid;
    border-radius: 50%;
    transition: all ease .3s;
}

.cheng {
    position: absolute;
    z-index: 1;
    margin-top: -50px;
    width: 103px;
    height: 43px;
    text-align: center;
    line-height: 43px;
}

.nana {
    display: none;
    transition: all ease .3s;
}

.dian:hover {
    border: 2px #c61a18 solid;
    cursor: pointer;

}
.ycde{
    position: relative;
    z-index: 0;
    margin-top: -86px;
    width: 103px;
    text-align: center;
    line-height: 43px;
}
.ycde1,.ycde2,.ycde3,.ycde4,.ycde5,.ycde6{
    display: none;
}
.cheng2{
    height: 64px;
}

js：

        // 滚动监听 -----------------------

        $(window).scroll(function() {
            var dsc = $(document).scrollTop();
            if (dsc > 0) {
                $(".ycdh").stop().fadeIn();
            } else {
                $(".ycdh").stop().fadeOut();
            };
            if(200 < dsc){
                $(".zuo,.zhong,.you").fadeIn(800);
            }else{
                $(".zuo,.zhong,.you").fadeOut(800);
            }
            if (dsc < 632) {
                $(".ycde1").show();
                $(".ycde2").hide();
                $(".ycde3").hide();
                $(".ycde4").hide();
                $(".ycde5").hide();
                $(".ycde6").hide();
            };
            if (dsc >= 632) {
                $(".ycde2").show();
                $(".ycde1").hide();
                $(".ycde3").hide();
                $(".ycde4").hide();
                $(".ycde5").hide();
                $(".ycde6").hide();
            };
            if (dsc >= 1622) {
                $(".ycde3").show();
                $(".ycde2").hide();
                $(".ycde1").hide();
                $(".ycde4").hide();
                $(".ycde5").hide();
                $(".ycde6").hide();
            };
            if (dsc >= 2580) {
                $(".ycde4").show();
                $(".ycde2").hide();
                $(".ycde3").hide();
                $(".ycde1").hide();
                $(".ycde5").hide();
                $(".ycde6").hide();
            };
            if (dsc >= 3570) {
                $(".ycde5").show();
                $(".ycde2").hide();
                $(".ycde3").hide();
                $(".ycde4").hide();
                $(".ycde1").hide();
                $(".ycde6").hide();
            };
            if (dsc >= 4508) {
                $(".ycde6").show();
                $(".ycde2").hide();
                $(".ycde3").hide();
                $(".ycde4").hide();
                $(".ycde5").hide();
                $(".ycde1").hide();
            };
        });
        // ------------滚动----------------------


        // --------------鼠标移上显示菜单--------------
        $(".dianwai").hover(function() {
            $(this).next(".cheng").find(".nana").show().parent('.cheng').siblings().find('.nana').hide();
            $(this).find(".dian").css("border", "2px #c61a18 solid").siblings(".dianwai").find(".dian").css("border",
                "2px #fff solid");
        }, function() {
            $(this).next(".cheng").find(".nana").hide();
            $(this).find(".dian").css("border", "2px #fff solid");
        });
        // ------------点击显示菜单----------------------
        $(".dw1").click(function() {
            $('.ycde1').stop().css("display", "block");
            $('.ycde2').stop().css("display", "none");
            $('.ycde3').stop().css("display", "none");
            $('.ycde4').stop().css("display", "none");
            $('.ycde5').stop().css("display", "none");
            $('.ycde6').stop().css("display", "none");
        });

        $(".dw2").click(function() {
            $('.ycde1').stop().css("display", "none");
            $('.ycde2').stop().css("display", "block");
            $('.ycde3').stop().css("display", "none");
            $('.ycde4').stop().css("display", "none");
            $('.ycde5').stop().css("display", "none");
            $('.ycde6').stop().css("display", "none");
        });

        $(".dw3").click(function() {
            $('.ycde1').stop().css("display", "none");
            $('.ycde2').stop().css("display", "none");
            $('.ycde3').stop().css("display", "block");
            $('.ycde4').stop().css("display", "none");
            $('.ycde5').stop().css("display", "none");
            $('.ycde6').stop().css("display", "none");
        });
        $(".dw4").click(function() {
            $('.ycde1').stop().css("display", "none");
            $('.ycde2').stop().css("display", "none");
            $('.ycde3').stop().css("display", "none");
            $('.ycde4').stop().css("display", "block");
            $('.ycde5').stop().css("display", "none");
            $('.ycde6').stop().css("display", "none");
        });
        $(".dw5").click(function() {
            $('.ycde1').stop().css("display", "none");
            $('.ycde2').stop().css("display", "none");
            $('.ycde3').stop().css("display", "none");
            $('.ycde4').stop().css("display", "none");
            $('.ycde5').stop().css("display", "block");
            $('.ycde6').stop().css("display", "none");
        });
        $(".dw6").click(function() {
            $('.ycde1').stop().css("display", "none");
            $('.ycde2').stop().css("display", "none");
            $('.ycde3').stop().css("display", "none");
            $('.ycde4').stop().css("display", "none");
            $('.ycde5').stop().css("display", "none");
            $('.ycde6').stop().css("display", "block");
        });
        // ----------滚动监听不同位置-----------------------------
        $('.dw1').click(function() {
            $('html,body').animate({
                scrollTop: '0px'
            }, 500);
            return false;
        });

        $('.dw2').click(function() {
            $('html,body').animate({
                scrollTop: '632px'
            }, 500);
            return false;
        });

        $('.dw3').click(function() {
            $('html,body').animate({
                scrollTop: '1622px'
            }, 500);
            return false;
        });

        $('.dw4').click(function() {
            $('html,body').animate({
                scrollTop: '2580px'
            }, 500);
            return false;
        });

        $('.dw5').click(function() {
            $('html,body').animate({
                scrollTop: '3570px'
            }, 500);
            return false;
        });

        $('.dw6').click(function() {
            $('html,body').animate({
                scrollTop: '4507px'
            }, 500);
            return false;
        });