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>
相关文章
这篇文章主要介绍了jQuery实现下滑菜单导航效果代码,通过jquery操作鼠标事件及页面样式动态操作实现下滑菜单导航功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
jquery获取table指定行和列的数据方法(当前选中行、列)
下面小编就为大家带来一篇jquery获取table指定行和列的数据方法(当前选中行、列)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文主要分享了将鼠标焦点定位到文本框最后的实例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
jQuery图片切换插件jquery.cycle.js使用示例
Cycle供了非常好的功能来帮助大家更简单的使用插件的幻灯功能，下面是它的一个非常不错的示例，大家可以学习下2014-06-06
这篇文章主要介绍了jquery实现的导航固定效果,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery+css实现百度百科的页面导航效果,需要的朋友可以参考下2014-12-12
jQuery.holdReady()方法允许jQuery的完成事件被该函数锁定，下面为大家介绍下其具体的使用2014-05-05
这篇文章主要教大家如何简单实现jQuery上传图片显示预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档，分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异，并给出了图文对比教程，非常的简单实用，有需要的朋友可以参考下2014-11-11
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效，但一直没有用，这几天研究了一下，并应用于实际中，对网站SEO方面没有什么帮助，不过可以节省一些流量，对于大网站来说显的尤为重要，至于节省了多少流量我无从统计。2011-03-03
最新评论