滚动条滚动到相应的位置，浮动页签切换样式【原创】

页面触发效果：

功能：1，菜单浮动框使用停留在浏览器边缘

     2，滚动条滚动到相应位置，触发对应的菜单为自动切换为选中样式

JS代码

//当浮动框移动到浏览器边缘时，跟随一起滚动      
$.fn.smartFloat = function() { 
    var position = function(element){    
        var abLeft=$(element).css("left"); //当为ablute时的left相对初始值
        var fixeLeft=$(element).offset().left+"px"; //在整个页面的绝对值
        var top = element.position().top;
        var pos = element.css("position");
        var tf=$(element).hasClass('detail-bar'); //判断当前对象是不是detail-bar层 针对线路详情页面
        $(window).scroll(function() {              
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0,
                        left:fixeLeft
                    });
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
                
                if(tf==true){
                    detailBar(scrolls); //线路详情页面增添动态效果
                  }
                
                
            }else {
                element.css({
                    position: pos,
                    top: top,
                    left:abLeft
                });    
            }
        });
};
    return $(this).each(function() {
        position($(this));                         
    });
};

 

//浮动页签 bar 自动切换选中效果
var detailBar=function(x){
     var top_1=$("#sub-1").offset().top;
     var top_2=$("#sub-2").offset().top;
     var top_3=$("#sub-3").offset().top;
     if(top_1<=x && x<top_2){
         $(".detail-bar ul li").eq(0).addClass("active").siblings("li").removeClass("active");
           return false;
         }else if(top_2<=x && x<top_3){ 
           $(".detail-bar ul li").eq(1).addClass("active").siblings("li").removeClass("active");
           return false;
         }else if(top_3<=x){
           $(".detail-bar ul li").eq(2).addClass("active").siblings("li").removeClass("active");  
           return false;
         }
    }

 HTML代码演示

<div style="position:relative; width:990px; margin:0 auto; padding-bottom:100px;">
        <!--TAB菜单-->
        <div class="detail-bar" style="position:absolute; width:990px; top:20px; left:0;">
              <ul>
                <li class="active"><a href="#sub-1">行程介绍</a></li>
                <li style="margin-left:1px;"><a href="#sub-2">接待标准</a></li>
                <li style="margin-left:1px;"><a href="#sub-3">旅游须知</a></li>
              </ul>
              <div class="clear"></div>
         </div>
         <div  class="tab-box" style=" padding-top:50px">
             <!--行程安排-->
             <a href="javascript:void(0)" name="sub-1" id="sub-1" style="display:block; visibility:hidden"></a>
             <div style="display:block; height:600px; background-color:#0099CC">
                  <!--内容-->
             </div>
             
             <!--接待标准-->
             <a href="javascript:void(0)" name="sub-2" id="sub-2" style="display:block; height:40px; margin-top:-40px;"></a>
             <div style="display:block; height:600px; background-color:#FF9900">
                  <!--内容-->
             </div>
             
             <!--旅游须知-->
             <a href="javascript:void(0)" name="sub-3"  id="sub-3" style="display:block; height:40px; margin-top:-40px;"></a>
             <div style="display:block; height:600px; background-color:#FF0099">
                 <!--内容-->
             </div>
        </div>
        
</div>

页面调用方法

<script type="text/javascript">
        $(".detail-bar").smartFloat();
</script>