jQuery怎么实现锁定页面元素

这篇文章主要介绍"jQuery怎么实现锁定页面元素"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"jQuery怎么实现锁定页面元素"文章能帮助大家解决问题。

摘要

在拖动滚动条时，对页面元素进行横向、纵向锁定。

介绍

对于展现内容较多的页面，在滚动时，我们经常需要对一些重要的元素进行锁定。这些元素经常是表格的行、列，也可能是搜索条件，或者是其他重要信息。
对于表格列的锁定，目前主要有三种方法。

1.表格控件
2.js生成fixtable之类填充
3.js+css

第一种，算是最简单的方法。但是用控件的缺点实在太多了，其中一个与本文有直接相关的缺点是，部分控件对多级表头的锁定支持的很差。

第二种，思路很清晰，但是实现起来非常复杂，维护成本过高。

第三种，正是本文所用的方法。目前网上也有多篇相关文章，但是就使用场景来说太局限了，没有对这一类问题进行更高程度的抽象。
我想要的是：不只是表格，只要是想要锁定的元素，只需要添加一个标识，再最多额外写一行代码就可以完成批量锁定。并且内部实现代码要尽量简单。

用法

对需要纵向锁定的元素添加样式lock-col，横向锁定的添加lock-row。在nayiLock方法中传入滚动的div所对应的id。

完整例子

            
    
        span1    
    
        
            
                
序号
                
表头1
                
表头2
            
        
        
            
                
1
                
test
                
test
            
            
                
2
                
test
                
test
            
        
        
    
        
            
                
                    colspan="2"                
                
                    colspan="1"                
            
            
                
序号
                
表头1
                
表头2
            
        
        
            
                
1
                
test
                
test
            
            
                
2
                
test
                
test
            
        
        

注：对低版本ie的兼容还是没找到js上的直接解决方法。建议使用expression方法。

关于"jQuery怎么实现锁定页面元素"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。