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

来源：互联网发布：淘宝产品信息模板编辑：程序博客网时间：2024/05/21 06:14
<!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>
1 0