基于jquery的DIV隨滾動條滾動而滾動的代碼
更新時間：2012年07月20日 18:56:57 作者：
基于jquery的DIV隨滾動條滾動而滾動的代碼，有了JQuery簡單多了，就幾行代碼搞定
核心代碼：
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop()+200;
var left= $(window).scrollLeft()+320;
$("#editInfo").css({ left:left + "px", top: top + "px" });
});
});
</script>
<div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;">
<div>用戶名：<input type="text" /></div>
<div>密碼：<input type="text" /></div>
<div>年齡：<input type="text" /></div>
<div>備注：<input type="text" /></div>
<div><input type="button" value="保存" /></div>
</div>
<div style="height:1500px"></div>
在線演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html
記得以前寫這樣的代碼比較麻煩，現(xiàn)在有了JQuery簡單多了，就幾行代碼搞定！
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop()+200;
var left= $(window).scrollLeft()+320;
$("#editInfo").css({ left:left + "px", top: top + "px" });
});
});
</script>
<div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;">
<div>用戶名：<input type="text" /></div>
<div>密碼：<input type="text" /></div>
<div>年齡：<input type="text" /></div>
<div>備注：<input type="text" /></div>
<div><input type="button" value="保存" /></div>
</div>
<div style="height:1500px"></div>
在線演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html
記得以前寫這樣的代碼比較麻煩，現(xiàn)在有了JQuery簡單多了，就幾行代碼搞定！
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動條高度實現(xiàn)代碼
- JQuery獲取元素文檔大小、偏移和位置和滾動條位置的方法集合
- jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁示例
- jquery easyui滾動條部分設(shè)置介紹
- jquery 判斷滾動條到達(dá)了底部和頂端的方法
- 基于jquery的橫向滾動條（滑動條）
- jQuery 錨點跳轉(zhuǎn)滾動條平滑滾動一句話代碼
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
- jquery滾動條插件slimScroll使用方法
相關(guān)文章
第一次認(rèn)識jquery延遲對象，這篇文章主要為大家詳細(xì)解析JQ延遲對象的相關(guān)概念,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章是對jquery獲取父窗口元素的實現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了jQuery遍歷json的方法,結(jié)合實例形式分析了jQuery針對json格式數(shù)據(jù)的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
jQuery對象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存，但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了jQuery通過deferred對象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05
在很多時候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進(jìn)行填寫表單2011-03-03
關(guān)于jquery form表單序列化的注意事項詳解
這篇文章主要給大家介紹了關(guān)于jquery form表單序列化的注意事項，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
把其中的參數(shù)默認(rèn)值作為$.fn.color對象的屬性單獨進(jìn)行設(shè)計，然后借助jquery.extend方法，覆蓋原來的參數(shù)選項即可2012-08-08
使用了jq的width()方法時在ff跟ie下運行問題不大，但是到了chrome上，就出現(xiàn)問題2014-05-05
今天在弄動態(tài)菜單的時候發(fā)現(xiàn)id里面包含特殊字符"/"，糾結(jié)了N久，就是不能根據(jù)這個ID獲取到節(jié)點2011-06-06