Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery设置div一直在页面顶部显示的方法

jQuery设置div一直在页面顶部显示的方法

发布时间:2014-04-27   编辑:www.jquerycn.cn
如何让div一直在页面顶部,这种类似的效果大家都有见过的,实现的方法也有很多,在本文为大家详细介绍下使用jquery是如何实现的,感兴趣的朋友不要错过
jquery部分
复制代码 代码如下:

<script src="JS/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var elm = $('#pordAttr');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(elm).css('position', ((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top', ((p) > startPos) ? '0px' : '');
});
});
</script>

HTML部分
复制代码 代码如下:

<div id="pordAttr">
<input type="text" value="奇异果" id="txtSearchImage" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>

您可能感兴趣的文章:
网页中返回顶部代码(多种方法)另附注释说明
jQuery设置div一直在页面顶部显示的方法
仿新浪微博返回顶部的jquery实现代码
页面回到顶部的三种实现方法(锚标记,js)
隐藏与显示回到顶部按钮的js代码
jquery easyui滚动条部分设置介绍
jQuery底部横幅提示插件 Meerkat
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
Jquery图形报表插件 jqplot简介及参数详解
js+JQuery返回顶部功能如何实现

关键词: jQuery  div  页面顶部   
[关闭]