<li v-for="(item, index) in navs" :key="index" :class="{click: selector==index}"@click="toHash(item, index)">{{item}}
</li>

// 点击右侧导航栏
toHash(item, index) {this.selector = index;window.location.hash = item; // 导航栏向上滚动相应距离，一个li的高度为54pxthis.$refs.left.scrollTop = (index > 7 ? index-7 : 0)*54;
}

var obj = element.getBoundingClientRect();

listScroll() {// 为了达到联动效果，右侧滑动则改变左侧导航栏样式var titles = document.getElementsByClassName('goodTitle');for(var i = 0; i < titles.length; i++) {var style = titles[i].getBoundingClientRect();if(style.top == 107) {this.toHash(titles[i].innerHTML, i);}}
}

#el {position: sticky;top: 0;
}

 <div :class="{pop: true, mov: item.num>0}"><!----></div>

.pop {display: inline-block;position: relative;left: 48px;opacity: 0;transition: all ease .5s;
}
.mov {left: 0;opacity: 1;
}

<!-- 运动的小球 -->
<div id="points"><div class="pointOuter pointPre"><div class="point-inner"></div></div>  <!--其他n个小球-->
</div>

increase(index1, index2, event) { // some code...// 小球动画 var top = event.clientY, // 小球降落起点left = event.clientX,endTop = window.innerHeight - 30,  // 小球降落终点endLeft = 20; // // 小球到达起点并去掉小球的display: none;var outer = $('#points .pointPre').first().removeClass("pointPre").css({left: left + 'px',top: top + 'px'});var inner = outer.find(".point-inner"); setTimeout(function() { // 将jquery对象转换为DOM对象outer[0].style.webkitTransform = 'translate3d(0,' + (endTop - top) + 'px,0)';inner[0].style.webkitTransform = 'translate3d(' + (endLeft - left) + 'px,0,0)';// 小球运动完毕恢复到原点setTimeout(function() {outer.removeAttr("style").addClass("pointPre");inner.removeAttr("style");}, 1000);  //这里的延迟值和小球的运动时间相关}, 1); 
}