JQuery页面滚动浮动层智能定位

╰+攻爆jí腚メ 2022-07-12 01:14 197阅读 0赞

![20170206151645710][]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="Generator" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery页面滚动浮动层智能定位</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	init_gotop();	
    	init_content_nav();
    });
    
    //回到顶部
    function init_gotop()
    {
    	$("#go_top").css("top",$(document).scrollTop()+$(window).height()-80);
    	$(window).scroll(function(){
    		$("#go_top").css("top",$(document).scrollTop()+$(window).height()-80);
    		if($(document).scrollTop()>0)
    			$("#go_top").fadeIn();
    		else
    			$("#go_top").fadeOut();
    	});	
    	
    	$("#go_top").bind("click",function(){
    		$("html,body").animate({scrollTop:0},"fast","swing",function(){
    		});
    	});
    
    }
    
    //关于内容页的滚动定位,包含x店通用的点击滚动
    function init_content_nav()
    {	
    	var is_show_fix = false;	
    	var content_idx = -1;
    	$.reset_nav = function(){
    	if($.browser.msie && $.browser.version =="6.0")
    		{
    			$(".fix-nav").css("top",$(document).scrollTop());
    		}	
    		
    		var navheight = $("#rel_nav").offset().top;
    		var docheight = $(document).scrollTop();		
    		if(docheight>navheight)		
    		{			
    			if(!is_show_fix)
    			{	
    				is_show_fix = true;
    				$(".fix-nav").show();
    				$("#rel_nav").css("visibility","hidden");
    				if($.browser.msie && $.browser.version =="6.0")
    				{						
    					$(".fix-nav").css("width",1100);			
    				}
    				else
    				{
    					$(".fix-nav").css({"top":0,"position":"fixed"});					
    					$(".fix-nav").animate({
    						width:1200
    					}, {duration: 200,queue:false });
    				}
    			}
    		}
    		else
    		{
    			if(is_show_fix)
    			{
    				is_show_fix = false;
    				$("#rel_nav").css("visibility","visible");
    				if($.browser.msie && $.browser.version =="6.0")
    				{
    					$(".fix-nav").hide();
    					$(".fix-nav").css("width",950);
    				}
    				else
    				{
    					$(".fix-nav").css({"top":navheight,"position":"absolute"});
    					$(".fix-nav").animate({
    						width:950
    					}, {duration: 200,queue:false,complete:function(){
    						$(".fix-nav").hide();
    					}});
    				}
    				
    				
    			}
    		}
    		
    		//开始自定定位nav的当前位置	
    		var content_boxes = $(".show-content .content_box");
    		$(".show-nav").find("li").removeClass("active");
    		content_idx = -1;
    		for(i=0;i<content_boxes.length;i++)
    		{
    			var scrollTop = $(document).scrollTop() + 50; 
    			var current_top = $(content_boxes[i]).offset().top;//内容盒子高度偏移，预留菜单高度
    			var next_top = current_top + 50000;  //下一个高度
    			if(i<content_boxes.length-1)
    			next_top = $(content_boxes[i+1]).offset().top;	
    			if(scrollTop>=current_top&&scrollTop<next_top)
    			{
    				var rel_id = $(content_boxes[i]).attr("rel");	
    				content_idx = rel_id;
    				break;
    			}
    			
    		}
    
    		$(".show-nav").find("li[rel='"+content_idx+"']").addClass("active");
    	};
    	$.reset_nav();	
    	$(window).scroll(function(){
    		$.reset_nav();
    	});	
    	
    	//滚动至xx定位
    	$.scroll_to = function(idx){
    		var rel_id = idx;	
    		var content_box = $(".show-content .content_box[rel='"+rel_id+"']");
    		var top = $(content_box).offset().top-40;
    		$("html,body").animate({scrollTop:top},"fast","swing",function(){
    			content_idx = rel_id;
    			$(".show-nav").find("li").removeClass("active");
    			$(".show-nav").find("li[rel='"+content_idx+"']").addClass("active");
    		});
    	};
    	//菜单点击
    	$(".show-nav").find("li").bind("click",function(){
    		
    		var rel_id = $(this).attr("rel");	
    		$.scroll_to(rel_id);
    	});
    }
    
    </script>
                        
    <style type="text/css">
    /* 公共样式 */
    body{word-break:break-all;   word-wrap:break-word;  font-size:14px; font-family: "microsoft yahei"; line-height:150%; margin:0px; padding:0px; min-width: 980px; color: rgb(102, 102, 102); background: rgb(255, 255, 255);}
    input{ font-family:Arial;}
    div{margin:0 auto; padding:0;}
    h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:none; list-style-type:none;}
    table{border-collapse: collapse;border-spacing: 0;}
    
    .f_l{float:left;}
    .f_r{float:right;}
    
    .hide{display:none;}
    /*自动高对齐*/
    .clearfix:after{
    content:"."; display:block; height:0; clear:both;
    visibility:hidden;
    }
    *html .clearfix{
     height:1%;
    }
    *+html .clearfix{
     height:1%;
    }
    /*页面留白*/
    .clear{height:0px; line-height:0px; clear:both; visibility:hidden;}
    .blank{height:10px; line-height:10px; clear:both; visibility:hidden;}
    .blank5{height:5px; line-height:5px; clear:both; visibility:hidden;}
    .blank10{height:10px; line-height:10px; clear:both; visibility:hidden;}
    .blank15{height:15px; line-height:15px; clear:both; visibility:hidden;}
    .blank20{ height:20px; line-height:20px; clear:both; visibility:hidden; }
    .blank100{ height:100px; line-height:100px; clear:both; visibility:hidden; }
    
    .wrap_full{ width:1200px; height:auto; margin:0 auto;} /*主体容器*/
    .wrap{ width:950px; height:auto;} /*左面局 1200总宽*/
    .zz_nav_actice{background: #2bb7aa; color: #fff;}
    /* 详情导航 */
    .show-nav{ border:#ddd solid 1px; background:#eee; height:40px; }
    .show-nav ul li{ float:left; display:block; height:40px; line-height:40px; text-align:center; padding:0px 25px; cursor:pointer; font-size:14px; border-right:#ddd solid 1px; }
    .show-nav ul li.active{ background:#2bb7aa; color:#fff;}
    
    .show-content{ background:@box_color;}
    
    .fix-nav{	
    	border-top:2px solid #2bb7aa;
    	position:fixed;
    	top:0;
    	text-align:center;	
    	height:40px;
    	_position:absolute;	
    	z-index:100;
    	
    }
    .fix-nav .show-nav{border-top:0px;}
    .flow_btn{ margin-right:8px; float:right; margin-top:8px;}
    
    .show-content .content_box .box_content{ padding:0 15px 15px 15px;}
    .show-content .content_box .box_content p{ width:auto; height:45px; line-height:45px;}
    .show-content .content_box .box_title{ font-size:16px; font-family:"微软雅黑"; font-weight:bolder; height:22px; line-height:22px; border-bottom:#ddd solid 2px; padding:15px; margin:15px 0px; }
    
    #go_top{
    	cursor:pointer;
    	position:absolute;
    	top:0px;
    	right:0px;
    	width:60px;
    	height:60px; 
    	margin-right:23px;
    	margin-bottom:20px; 
    	-moz-border-radius:3px;
    	-webkit-border-radius:3px;
    	border-radius:3px;
    	display:none;
    	z-index:60;
    }
    </style>
    </head>
    <body>
    <div class="wrap_full">
    <div class="blank100"></div>
      <div class="clearfix"> 
        <div class="wrap f_l">      
          
          <div class="show-nav" id="rel_nav"> 
            
            <ul>
              <li rel="n0" class="zz_nav_actice">购买须知</li>
              <li rel="n1">本单详情</li>
              <li rel="n2">商家介绍</li>
              <li rel="n3">消费评价</li>
            </ul>
             
          </div>
          <div style="display:none;" class="fix-nav wrap"> 
            
            <div class="show-nav"> 
              
              <ul class="f_l">
                <li rel="n0">购买须知</li>
                <li rel="n1">本单详情</li>
                <li rel="n2">商家介绍</li>
                <li rel="n3">消费评价</li>
              </ul>
              <button class="flow_btn">立即购买</button>
               
            </div>
             
          </div>
          <div class="show-content">
          
            <div rel="n0" class="content_box">
              <div class="box_title">购买须知</div>
    		  <div class="box_content">
                  <p>购买须知</p>
                  <p>购买须知</p>
                  <p>购买须知</p>
                  <p>购买须知</p>
                  <p>购买须知</p>
                  <p>购买须知</p>
              </div>
            </div>
            
            <div rel="n1" class="content_box">
              <div class="box_title">本单详情</div>
              <div class="box_content">
    			  <p>本单详情</p>
                  <p>本单详情</p>
                  <p>本单详情</p>
                  <p>本单详情</p>
                  <p>本单详情</p>
                  <p>本单详情</p>
              </div>
            </div>
            
            <div rel="n2" class="content_box">
              <div class="box_title">商家介绍</div>
              <div class="box_content">
    			  <p>商家介绍</p>
                  <p>商家介绍</p>
                  <p>商家介绍</p>
                  <p>商家介绍</p>
                  <p>商家介绍</p>
                  <p>商家介绍</p>
              </div>
            </div>
            
            <div rel="n3" class="content_box">
              <div class="box_title">消费评价</div>
              <div class="box_content">
    			  <p>消费评价</p>
                  <p>消费评价</p>
                  <p>消费评价</p>
                  <p>消费评价</p>
                  <p>消费评价</p>
                  <p>消费评价</p>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <div class="blank"></div>
    <a id="go_top" href="javascript:void(0);">回到顶部</a>
    </body>
    </html>

[20170206151645710]: /images/20220711/8c076fbc57114c3f80fb370618afbea0.png