溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery怎么實現鎖定頁面元素”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jQuery怎么實現鎖定頁面元素”文章能幫助大家解決問題。
在拖動滾動條時，對頁面元素進行橫向、縱向鎖定。
對于展現內容較多的頁面，在滾動時，我們經常需要對一些重要的元素進行鎖定。這些元素經常是表格的行、列，也可能是搜索條件，或者是其他重要信息。
對于表格列的鎖定，目前主要有三種方法。
1.表格控件
2.js生成fixtable之類填充
3.js+css
第一種，算是最簡單的方法。但是用控件的缺點實在太多了，其中一個與本文有直接相關的缺點是，部分控件對多級表頭的鎖定支持的很差。
第二種，思路很清晰，但是實現起來非常復雜，維護成本過高。
第三種，正是本文所用的方法。目前網上也有多篇相關文章，但是就使用場景來說太局限了，沒有對這一類問題進行更高程度的抽象。
我想要的是：不只是表格，只要是想要鎖定的元素，只需要添加一個標識，再最多額外寫一行代碼就可以完成批量鎖定。并且內部實現代碼要盡量簡單。
對需要縱向鎖定的元素添加樣式lock-col，橫向鎖定的添加lock-row。在nayiLock方法中傳入滾動的div所對應的id。
完整例子
<!DOCTYPE>
<html>
<head>
<title>鎖定</title>
<meta http-equiv="X-UA-Compatible" charset="utf-8"/>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
table td, th{
text-align: center;
border:#dee9ef 1px solid;
}
</style>
<script>
jQuery(function(){
nayiLock("aDiv");
//支持多級表頭的鎖定
nayiLock("bDiv");
//支持對多個div的鎖定
})
//scrollDivId 滾動的div的id
function nayiLock(scrollDivId){
jQuery("#" + scrollDivId).scroll(function(){
var left = jQuery("#" + scrollDivId).scrollLeft();
jQuery(this).find(".lock-col").each(function(){
jQuery(this).css({"position":"relative","left":left,"background-color":"white","z-index":jQuery(this).hasClass("lock-row")?20:10});
});
var top = jQuery("#" + scrollDivId).scrollTop();
jQuery(this).find(".lock-row").each(function(){
jQuery(this).css({"position":"relative","top":top,"background-color":"white","z-index":jQuery(this).hasClass("lock-col")?20:9});
});
});
}
</script>
</head>
<body id="myBody">
<div id="aDiv" >
<div class="lock-row lock-col" >
<span id="span1" >span1</span>
</div>
<table id="table1" >
<thead>
<tr>
<th id="testTh" class="lock-col lock-row">序號</th>
<th class=" lock-row">表頭1</th>
<th class="lock-row">表頭2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="lock-col">1</td>
<td class="">test</td>
<td>test</td>
</tr>
<tr>
<td class="lock-col">2</td>
<td class="">test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
<div id="bDiv" >
<table id="table1" >
<thead>
<tr>
<th colspan="2" class="lock-col lock-row">
colspan="2"
</th>
<th class="lock-row">
colspan="1"
</th>
</tr>
<tr>
<th id="testTh" class="lock-col lock-row">序號</th>
<th class="lock-col lock-row">表頭1</th>
<th class="lock-row">表頭2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="lock-col">1</td>
<td class="lock-col">test</td>
<td>test</td>
</tr>
<tr>
<td class="lock-col">2</td>
<td class="lock-col">test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>注：對低版本ie的兼容還是沒找到js上的直接解決方法。建議使用expression方法。
關于“jQuery怎么實現鎖定頁面元素”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
