码迷,mamicode.com
首页 > Web开发 > 详细

指定元素始终显示在页面顶端的js特效

时间:2015-03-21 16:50:25      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

实现如图效果,页面下滑时,搜索框一直显示在页面顶端。

技术分享

引入jquery之后:

$(function () { 
	var ie6 = document.all; 
	var dv = $(‘#gdsearch‘), st; 
	dv.attr(‘otop‘, dv.offset().top); //存储原来的距离顶部的距离 
	$(window).scroll(function () { 
		st = Math.max(document.body.scrollTop || document.documentElement.scrollTop); 
		if (st > parseInt(dv.attr(‘otop‘))) { 
			if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果 
				dv.css({ ‘position‘: ‘absolute‘, ‘top‘: st,‘left‘:6, ‘width‘:1012 });
				$(‘#gdtd‘).css({‘width‘:1012});
			} else if (dv.css(‘position‘) != ‘fixed‘){
				dv.css({ ‘position‘: ‘fixed‘, top: 0 });	
			} 
		} else if (dv.css(‘position‘) != ‘static‘){
			dv.css({ ‘position‘: ‘static‘,‘top‘:0,‘left‘:6,‘width‘:1012 });
			$(‘#gdtd‘).css({‘width‘:1012});
		} 
			 
	}); 
}); 

 

指定元素始终显示在页面顶端的js特效

标签:

原文地址:http://www.cnblogs.com/sunyt/p/4355659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!