首页侧边导航滚动效果

src/main/resources/static/js/index.js

@@ -190,6 +190,7 @@ var homeData = new Vue({
         this.getTopicData();
         this.getAdvertising();
         // 侧边栏滚动判断
+        var distance = 0;
         $(window).scroll(function () {
             if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
                 return false;
@@ -197,7 +198,26 @@ var homeData = new Vue({
             var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
             if(scoll >200){
                 $('#sideNav').show();
-                if(isPC){$('#advertising').show();}
+                if(isPC){
+                    $('#advertising').show();
+                    // 鼠标滚动楼层
+                    setTimeout(function () {
+                        distance = scoll;
+                    },0);
+                    $('.floorTit').each(function (i,l) {
+                        //每个元素距离顶部的距离
+                        var top = $(this).offset().top;
+                        if(scoll > distance){
+                            if(scoll >= (top-300)){
+                                $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
+                            }
+                        }else {
+                            if(scoll >= (top-600)){
+                                $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
+                            }
+                        }
+                    });
+                }
             }else {
                 $('#sideNav').hide();
                 $('#advertising').hide();