jQuery設(shè)置div一直在頁面頂部顯示的方法
更新時(shí)間：2013年10月24日 16:02:58 作者：
如何讓div一直在頁面頂部，這種類似的效果大家都有見過的，實(shí)現(xiàn)的方法也有很多，在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
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>
復(fù)制代碼 代碼如下:
<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部分
復(fù)制代碼 代碼如下:
<div id="pordAttr">
<input type="text" value="奇異果" id="txtSearchImage" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
相關(guān)文章
為jQuery增加join方法的實(shí)現(xiàn)代碼
正在做一個(gè)在線書簽管理的站點(diǎn)，有需要這樣一個(gè)功能,把匹配節(jié)點(diǎn)的id或值拼合起來以用來傳遞參數(shù)。2010-11-11
一款jquery特效編寫的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片，最好的是，此特效兼容ie6以及其它瀏覽器。2013-08-08
jQuery 的 tagit 插件效果還是不錯(cuò)的，今天用到該插件，下面給大家詳細(xì)講解下此插件的具體用法。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼。2009-07-07
這篇文章主要為大家分享了7個(gè)jQuery最佳實(shí)踐，在使用JavaScript庫的時(shí)候，有哪些最佳實(shí)踐，又有哪些不好的實(shí)踐呢？感興趣的小伙伴們可以參考一下2016-01-01
jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級菜單效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級菜單效果,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件延時(shí)展示菜單的功能,涉及jQuery結(jié)合時(shí)間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery對<select>的操作比較麻煩，我把常用的收集如下2011-03-03
JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery排序插件tableSorter的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
忙了一夜，終于把jquery的顏色選擇插件寫完了，不多說了，看看代碼吧。2008-10-10