jQuery设置div一直在页面顶部显示的方法
更新时间：2013年10月24日 16:02:58 作者：
如何让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>
复制代码 代码如下:
<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>
相关文章
正在做一个在线书签管理的站点，有需要这样一个功能,把匹配节点的id或值拼合起来以用来传递参数。2010-11-11
焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片，最好的是，此特效兼容ie6以及其它浏览器。2013-08-08
jQuery 的 tagit 插件效果还是不错的，今天用到该插件，下面给大家详细讲解下此插件的具体用法。这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
模仿jQuery each函数的链式调用实现代码。2009-07-07
这篇文章主要为大家分享了7个jQuery最佳实践，在使用JavaScript库的时候，有哪些最佳实践，又有哪些不好的实践呢？感兴趣的小伙伴们可以参考一下2016-01-01
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
这篇文章主要介绍了jQuery实现带延时功能的水平多级菜单效果,可实现响应鼠标事件延时展示菜单的功能,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-09-09
jquery对<select>的操作比较麻烦，我把常用的收集如下2011-03-03
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
这篇文章主要介绍了JQuery中模拟image的ajaxPrefilter与ajaxTransport处理,本文直接给出模拟实现代码,代码中包含详细注释,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了jQuery排序插件tableSorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
忙了一夜，终于把jquery的颜色选择插件写完了，不多说了，看看代码吧。2008-10-10
最新评论