基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼
更新時(shí)間：2012年07月20日 18:56:57 作者：
基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼，有了JQuery簡(jiǎn)單多了，就幾行代碼搞定
核心代碼：
<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簡(jiǎn)單多了，就幾行代碼搞定！
復(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簡(jiǎn)單多了，就幾行代碼搞定！
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁示例
- jquery easyui滾動(dòng)條部分設(shè)置介紹
- jquery 判斷滾動(dòng)條到達(dá)了底部和頂端的方法
- 基于jquery的橫向滾動(dòng)條（滑動(dòng)條）
- jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- JS和JQUERY獲取頁面大小,滾動(dòng)條位置,元素位置(示例代碼)
- jquery滾動(dòng)條插件slimScroll使用方法
相關(guān)文章
jquery easyui combox一些實(shí)用的小方法
這篇文章主要介紹了jquery easyui combox一些實(shí)用的小方法，有需要的朋友可以參考一下2013-12-12
上一篇提到j(luò)Query中添加事件提供給客戶端程序員的接口方法有很多bind/click等，但其實(shí)現(xiàn)的核心方法是jQuery.event.add。2011-07-07
JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行，可以應(yīng)用于很多場(chǎng)景，需要的朋友可以參考下2014-09-09
實(shí)例解析jQuery中如何取消后續(xù)執(zhí)行內(nèi)容
本文主要介紹了jQuery中取消后續(xù)執(zhí)行內(nèi)容的實(shí)例，代碼通俗易懂。需要的朋友來看下吧2016-12-12
Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢，jquery的tab切換式瀏覽卻可以解決這個(gè)問題2013-04-04
詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。下面通過本文給大家分享jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)，需要的的朋友參考下2017-07-07
jquery如何根據(jù)值設(shè)置默認(rèn)的選中項(xiàng)
這篇文章主要介紹了jquery如何根據(jù)值設(shè)置默認(rèn)的選中項(xiàng),需要的朋友可以參考下2014-03-03
推薦給大家一款jQuery實(shí)現(xiàn)的仿FLASH超炫的導(dǎo)航特效代碼，有需要的小伙伴直接拿走吧2014-11-11
這篇文章主要介紹了擴(kuò)展datagrid的一個(gè)方法keyCtr實(shí)現(xiàn)鍵盤上下控制選中行,需要的朋友可以參考下2014-03-03
做前端開發(fā)的朋友對(duì)于ajax異步更新一定印象深刻，本文主要介紹了關(guān)于ajax異步請(qǐng)求的那點(diǎn)事，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01