A锚点实现，滚动页面内容改变tab选项

Css:

ul{margin:0;padding:0;list-style:none;}
a{
text-decoration: none;
outline:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-outline-style:none;
color:#333;
}
.left{
width:200px;
background-color:#eee;
padding:20px 0;
box-sizing:border-box;
float:left;
position:fixed;
}

.left ul li{height:50px;line-height:50px;}
.left ul li a{padding:0 10px;display:block;}
.left ul li a:hover{background-color:#eabfd3;color:#fff;}
.left ul li.ac{
background-color:#eabfd3;
}
.left ul li.ac a{color:#fff;}
.right{width:1000px;background-color:#eee;margin-left:220px;border:#ccc solid 1px;}
.right div{height:500px;color:#fff;margin-bottom:20px;background-color:#eabfd3;}
.foot{height:350px;}

Html:

     <div class="left">

     <ul class='_cf'>

          <li class='ac'><a href='#a1'>通用</a></li>

          <li><a href='#a2'>汽车</a></li>

          <li><a href='#a3'>厨具</a></li>

          <li><a href='#a4'>餐饮</a></li>

          <li><a href='#a5'>新闻</a></li>

          <li><a href='#a6'>微博</a></li>

       </ul>

    </div>

    <div class="right">

        <div id="a1">

 

             a1

        </div>

        <div id="a2">

              a2

        </div>

        <div id="a3">

             a3

        </div>

        <div id="a4">

             a4

        </div>

        <div id="a5">

              a5

        </div>

        <div id="a6">

             a6

        </div>

    </div>

    <div class="foot">

Js部分

<script>

       window.οnscrοll=function(){

                  

           var top=$(document).scrollTop();

            // alert(top);       

           if(top>0 && top<=500){

               $('ul li').removeClass('ac');

               $('ul li').eq(0).addClass('ac');

           }

           if(top>400 && top<900){

               $('ul li').removeClass('ac');

               $('ul li').eq(1).addClass('ac');

           }

           if(top>900 && top<1300){

               $('ul li').removeClass('ac');

               $('ul li').eq(2).addClass('ac');

           

           }

           if(top>1300 && top<1800){

               $('ul li').removeClass('ac');

               $('ul li').eq(3).addClass('ac');

           

           }

           if(top>1800 && top<2200){

               $('ul li').removeClass('ac');

               $('ul li').eq(4).addClass('ac');

           }

           if(top>2200){

               $('ul li').removeClass('ac');

               $('ul li').eq(5).addClass('ac');

           }

       }

    </script>

 

原谅老夫的少女心~~~~~~~~~~

转载于:https://www.cnblogs.com/adah/p/7280027.html