<!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"> <!--{start: 详情导航 --> <ul> <li rel="n0" class="zz_nav_actice">购买须知</li> <li rel="n1">本单详情</li> <li rel="n2">商家介绍</li> <li rel="n3">消费评价</li> </ul> <!--}end: 详情导航 --> </div> <div style="display:none;" class="fix-nav wrap"> <!--{start: 浮动导航 --> <div class="show-nav"> <!--{start: 详情导航 --> <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> <!--}end: 详情导航 --> </div> <!--}end: 浮动导航 --> </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>
新闻热点
疑难解答
