Html
    Css
    Js

    
                        
ul {
	list-style:none;
}
.box {
	width:1200px;
	margin:0 auto;
}
ul {
	background-color:#000;
	height:40px;
	position:relative;
}
ul>li {
	float:left;
	line-height:40px;
	color:#fff;
	width:100px;
	text-align:center;
}
span {
	width:100px;
	height:3px;
	display:block;
	background-color:#42beff;
	position:absolute;
	top:37px;
	transition:all .5s;
	-moz-transition:all .5s;
	-webkit-transition:all .5s;
	-o-transition:all .5s
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery导航滑动跟随效果

4
      °Ghoul丶睫情 绿墨 0
      2019/1/14 19:21:30
      是,pc端打开又问题 回复
      罄?一瞥0
      2017/7/3 16:12:28

      还有,你的计算li的位置写成var x = $(this).index()*100;不就好了,你这样写不能自适应

          3.10
          2017/7/4 14:56:27

          这是固定了宽度,如果没固定的话就不能这样。我是想算出li距离的位置 在给span

      回复
      罄?一瞥0
      2017/7/3 15:38:35
      这是手机端的吧,pc端打开有问题的 回复