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

最新推荐文章于 2021-10-12 15:33:47 发布
最新推荐文章于 2021-10-12 15:33:47 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： WEB前端 文章标签： JQuery 页面滚动 浮动层 智能定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netuser1937/article/details/54893335
版权 

<!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>


相思比梦长
关注
专栏目录
jQuery实现页面滚动时元素智能定位
11-01
我们玩网页微博时，消息提示框一直会出现在页面右上方，即使下拉滚动条它都会浮动定位在右上方，直到你关闭小时提示框。
jQuery页面定位导航滚动插件jquery.nav
05-22
jQuery实现简单漂亮的Nav导航菜单效果 ，滚动时自动高亮导航菜单 电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。
Jquery实现页面滚动时导航智能定位
九天翔龙的技术博客
09-08 2534
页面滚动的时候，侧边辅助导航提示到对应的内容。尤其是对于内容很长的页面很好的一个体验。 借助jquery，可以轻松实现。 &lt;!-- 侧边导航 --&gt; &lt;div class="subaside" id="JS_subaside"&gt; &lt;ul&gt; &lt;li class="current"&gt;&lt;
jQuery实现页面滚动时元素的智能定位
luo19302的专栏
08-21 758
/*jQuery实现页面滚动时元素智能定位*/ $.fn.smartFloat = function() {      var position = function(element) {          var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离          var pos = element.css(
jQuery页面滚动浮动层智能定位实例代码
10-28
这个实例展示了如何利用 jQuery 实现一个兼容性良好的页面滚动浮动层。`smartFloat` 方法不仅解决了元素在页面滚动时的定位问题，还考虑了不同浏览器对 `position: fixed` 支持的差异，确保在各种环境下都能正常工作...
jQuery实现页面滚动时智能浮动定位
10-20
在本教程中，我们将深入探讨如何使用 jQuery 实现页面滚动时的智能浮动定位。 首先，我们来看一下提供的 HTML 结构： ```html <div class="demo"></div> 我在这里等你噢！ ``` 在这个例子中，`div.float` 是...
jQuery实现页面滚动时层智能浮动定位实例探讨
12-11
各位兄弟可能碰到定位的问题，特别是在博客...jQuery实现页面滚动时层智能浮动定位</title> <meta name=”description” content=”” /> <script type=”text/javascript” src=”http://jt.875.cn/
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
10-28
页面滚动时层智能浮动定位的实现是一个常见而又实用的前端开发技术，它能够提升用户界面的可用性和美观度。在这个实现过程中，主要涉及到的技术知识点包括了对滚动事件的监听、页面元素的定位方式以及浏览器兼容性...
智能浮动
Zoe_Wang_ing的专栏
12-31 647
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1242 一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动
jquery.floatdiv 浮动层固定位置
04-29
jquery.floatdiv 浮动层固定位置 /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv("righttop"); //居中 $("#id").floatdiv("middle");
jQuery页面滚动显示浮动菜单栏锚点定位效果
09-08
jQuery页面滚动显示浮动菜单栏锚点定位效果
jQuery页面滚动时层智能浮动定位
05-22
jQuery 实现页面滚动时层的智能浮动定位
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
jq实现滚动定位
alifj9932的博客
02-04 183
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网－JQuery网页定位导航特效</title> <style> /*All tag*/ ...
jQuery实现页面滚动时元素智能定位，页面导航栏会自动定位到浏览器顶部
weixin_30518397的博客
03-25 350
本文将以淘宝网商品详情的简易导航为例，和大家一起分享通过jQuery和CSS实现页面元素（要浮动的层）智能定位的效果。 实现过程 Js侦听滚动事件，当页面滚动的距离（页面滚动的高度）超出了对象（要滚动的层）距离页面顶部的高度，即要滚动的层到达了浏览器窗口上边缘时，立即将对象定位属性position值改成fixed（固定）。同时为了有个好点的体验效果，可以将对象的样式设置阴影效果以便更...
使用jq简单实现滚动定位到指定元素
qq_36990322的博客
10-12 3003
前言 滚动是一个很常用的属性，我们需要对它很熟悉，不然就容易踩坑。比如我今天想通过几行简单的代码实现滚动到指定元素上，却遇到了一个坑。即offsetTop 到底是以谁作为父级容器来计算距离？offsetParent又是什么？ 用到的api offsetTop HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。 offsetParent HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（
Jquery任意位置浮动固定层【插件】
珠海-PHP程序员的博客
03-15 129
[code="javascript"] /*任意位置浮动固定层*/ /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $...
jQuery实现页面滚动时层智能浮动定位
37度2
05-22 2061
一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动，如下： 随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了，如下图所示： 类似的效果在新浪微博上也有： 当页面滚动，新动态提示
JQuery实现：页面滚动时保持浮动的窗口控件
在本教程中，我们将探讨如何利用JQuery来创建一个浮动窗口控件，这一控件会在用户滚动页面时保持在屏幕上的可见位置。 1. 浮动窗口控件的基本概念 浮动窗口控件是指一种网页设计元素，当用户滚动页面时，该元素会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值