jquery滚动跟随响应菜单

$(function(){

var s_top = function(n){

return $(n).offset().top-400;

    };

function s_cur1(m){

if($("#elevator li").hasClass("current")){

$("#elevator li").removeClass("current");

}

$("#elevator li"+m).addClass("current");

    }

   var m=12;

$("#elevator li").click(function() {

var el = $(this).attr('class').split(" ")[0];

$("html,body").animate({scrollTop:s_top("#"+el)+400},300);

s_cur1("."+el);

  });

$(window).scroll(function(){

var $this = $(this);

var targetTop = $(this).scrollTop();

var footerTop = $("#footer").offset().top;

if(targetTop<s_top("#F1")){

$("#elevator").hide();

}else{

$("#elevator").show();

}

  var i=1;

while (i<=m)

        {

if(targetTop>=s_top("#F"+i)){

s_cur1(".F"+i);

}

i++;

        }

})

}());

#elevator {  z-index: 5;     margin-left: 610px;  position: fixed;  _position: absolute;  left: 50%;  bottom: 145px;  top: auto;  display:none;}

#elevator ul {  background-color: rgba(255,255,255,.8);}

#elevator li {  height: 30px;  line-height: 30px;  text-align: center;  margin-top: -1px;  cursor: pointer;  position:relative;  border-bottom:1px #cfcfcf dashed;}

#elevator li span {  display: block;  width: 30px;  height: 30px;  margin: 0 auto;  color: #625351;  font-size: 14px;  font-family: Arial;}

#elevator li .etitle {  display: none; background: #747eb1; height: 30px;  font-size: 12px;  position: absolute;  text-align: left;  left: 30px;  top: 0px;  width: 150px;  padding-left: 5px;  z-index: 6;   color:#fff;}

#elevator li.current span {  color: #fff;  background: #5560a0;}

#elevator li:hover span{  color: #fff;  text-decoration: none; background: #5560a0;}

#elevator li:hover .etitle{display: block;}

<div id="elevator">

  <ul>

{loop $child $i $c}

    <li class="F{$i+1}"><span>{$i+1}F</span><div class="etitle">{$c[catname]}</div></li>

{/loop}

  </ul>

</div>

打赏

感谢支持与鼓励～