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" style="width:600px;height:200px;overflow:auto;">
<div class="lock-row lock-col" >
<span id="span1" >span1</span>
</div>
<table id="table1" style="width:800px;height:250px;" >
<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" style="width:600px;height:100px;overflow:auto;">
<table id="table1" style="width:800px;height:150px;">
<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方法。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。