jquery smartFloat插件仿淘寶產品列表頁隨頁面滾動固定層



114 452 151



特效描述: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

加群請備注:從官網了解到

老夫子电子