欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

jQuery实现页面转动时元素智能定位

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

我们玩网页微博时,动静提醒框一向会呈此刻页面右上方,纵然下拉转动条它城市浮动定位在右上方,直到你封锁小时提醒框。相同的结果在淘宝商品详情页面上也有,当我们下拉转动页面时,用来导航切换的“宝物详情”、“买卖营业详情”等一排按钮会一向呈此刻赏识器顶部,利便我们切换导航。

jQuery实现页面转动时元素智能定位

本文将以淘宝网商品详情的浅显导航为例,和各人一路分享通过jQuery和CSS实现页面元素(要浮动的层)智能定位的结果。

实现进程

Js侦听转动变乱,当页面转动的间隔(页面转动的高度)超出了工具(要转动的层)间隔页面顶部的高度,即要转动的层达到了赏识器窗口上边沿时,当即将工具定位属性position值改成fixed(牢靠)。同时为了有个好点的体验结果,可以将工具的样式配置阴影结果以便更好的区分浮动层与页面内容主体。

这里必要留意的是,老先进IE6不支持fixed,那就只能行使absolute来取代,可是这样会有一个题目,将会导致在IE6下看不到滑腻结果。我们可以通过window.XMLHttpRequest来判定是否为IE6,由于除IE6及更低版本IE赏识器外,其他当代赏识器都支持window.XMLHttpRequest。尚有就是本例中我们用Css3来制造阴影结果,为了兼容IE6-IE8,你也可以行使图片来配置阴影结果。

HTML

我们仿淘宝网的商品详情页面,成立一个浅显的导航条。

<div id="nav">
    <ul>
    	<li><a href="#">宝物详情</a></li>
        <li class="cur"><a href="#">评价详情(123)</a></li>
        <li><a href="#">成交记录(68件)</a></li>
    </ul>
</div>

为了到达转动结果,我们应该在页面中安排一些其他的元素可能配置body的高度,将页面高度撑起来。

CSS

我们运用Css3,将导航条包装的稍显正规点,虽然你也可以施展你的美工拿手,让它不那么土。留意我们行使了阴影结果的样式.shadow,用来动态的将结果赋给浮动的工具。

#nav{width:720px; height:42px; position:absolute; margin-left:20px; border:1px solid #d3d3d3; 
background:#f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#nav li{float:left; height:42px; line-height:42px; padding:0 10px; border-right:
1px solid #d3d3d3; font-size:14px; font-weight:bold}
#nav li.cur{background:#f1f1f1; border-top:1px solid #f60}
#nav li a{text-decoration:none;}
#nav li.cur a{color:#333}
#nav li a:hover{color:#f30}
.shadow{-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px 
rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}

jQuery

本例中依靠jQuery库,以是必需先引入jQuery库文件。接着,我们按实现流程完成智能定位结果,请看代码及注释。

$.fn.smartFloat = function() {
	var position = function(element) {
		var top = element.position().top; //当前元素工具element间隔赏识器上边沿的间隔
        var pos = element.Css("position"); //当前元素间隔页面document顶部的间隔
		$(window).scroll(function() { //侦听转动时
			var scrolls = $(this).scrollTop();
			if (scrolls > top) { //假如转动到页面超出了当前元素element的相对页面顶部的高度
				if (window.XMLHttpRequest) { //假如不是ie6
					element.Css({ //配置Css
						position: "fixed", //牢靠定位,即不再跟从转动
						top: 0 //间隔页面顶部为0
					}).addClass("shadow"); //加上阴影样式.shadow
				} else { //假如是ie6
					element.Css({
						top: scrolls  //与页面顶部间隔
					});	
				}
			}else {
				element.Css({ //假如当前元素element未转动到赏识器上边沿,则行使默认样式
					position: pos,
					top: top
				}).removeClass("shadow");//移除阴影样式.shadow
			}
		});
	};
	return $(this).each(function() {
		position($(this));						 
	});
};

最后,我们挪用以上结果:

$(function(){
	$("#nav").smartFloat();
});

大功告成,去看下结果吧: demo.

本文地址:http://itbyc.com/web/javascript/13855.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1