jQuery怎么实现锁定页面元素
这篇文章主要介绍“jQuery怎么实现锁定页面元素”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery怎么实现锁定页面元素”文章能帮助大家解决问题。
摘要
在拖动滚动条时，对页面元素进行横向、纵向锁定。
介绍
对于展现内容较多的页面，在滚动时，我们经常需要对一些重要的元素进行锁定。这些元素经常是表格的行、列，也可能是搜索条件，或者是其他重要信息。
对于表格列的锁定，目前主要有三种方法。
表格控件
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 class="lazy" data-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的idfunction 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怎么实现锁定页面元素”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
