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