jquery smartFloat插件仿淘宝产品列表页随页面滚动固定层



109 433 145



特效描述:smartFloat插件 产品列表页 页面滚动固定层,jquery smartFloat插件制作页面固定层特效,固定层,随浏览器滚动条滚动一直保持在页面固定顶部最上面位置,类似淘宝产品列表页默认排序搜索框效果,提高了用户体验设计。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.pagedemo{width:760px;margin:0 auto;}
#nav_left_layout{position:absolute;height:30px;width:760px;background:#dedede;}
</style>
<div class="pagedemo">
		<div style="height:100px;background:#eee;"></div>
		<div id="nav_left_layout"><a title="仿淘宝默认排序搜索框" href="http://www.dijiuzhanzhang.com/"><img src="images/searchbox.gif" width="760" height="30" alt="仿淘宝默认排序搜索框" /></a></div>
		<div style="height:900px;overflow:hidden;"></div>
</div>
<script type="text/javascript"> 
$.fn.smartFloat = function() {
	var position = function(element) {
		var top = element.position().top, pos = element.css("position");
		$(window).scroll(function() {
			var scrolls = $(this).scrollTop();
			if (scrolls > top) {
				if (window.XMLHttpRequest) {
					element.css({
						position: "fixed",
						top: 0
					});	
				} else {
					element.css({
						top: scrolls
					});	
				}
			}else {
				element.css({
					position: pos,
					top: top
				});	
			}
		});
};
	return $(this).each(function() {
		position($(this));						 
	});
};
//绑定
$("#nav_left_layout").smartFloat();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 选项卡自动切换 城市选择 城市选择器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到