• 表格头部固定,内容里面第一列固定,不固定的超过显示滚动条


    if ($('.seach-result table').length !== 0) {
                    var $container = $('.seach-result');
    
                    $container.css({
                        position: 'relative',
                        overflow: 'auto',
                        height: '550px',
                        paddingLeft: '0',
                        paddingTop : '0',
                        marginLeft: '20px',
                        marginTop: '10px'
                    });
                    $container.find('table').css({
                        borderCollapse: 'collapse',
                        whiteSpace: 'nowrap'
                    });
    
                    var $head = $container.find('th');
    
                    var $headcol2 = $head.filter(':lt(1)');
                    var $col = $container.find('td:first-child');
    
                    $col.css({
                        backgroundColor: '#ffffff',
                        backgroundClip: 'padding-box'
                    });
    
                    function moveBar() {
                        $this = $(this);
                        var newTop = $container.scrollTop();
                        $head.css({
                            top: newTop < 0 ? 0 + 'px' : newTop + 'px'
                        })
                    }
    
                    function moveCol() {
                        $this = $(this);
                        var newLeft = $container.scrollLeft();
                        $col.add($headcol2).css({
                            left: newLeft < 0 ? 0 + 'px' : (newLeft) + 'px'
                        })
                    }
    
                    $head.css({
                        zIndex: 1000
                    });
                    $headcol2.css({
                        zIndex: 1200
                    });
    
                    $col.add($headcol2).css({
                        position: 'relative',
                        backgroundColor: '#ffffff',
                    });
                    $container.on('scroll', moveCol);
    
                    $head.css({
                        position: 'relative',
                        backgroundColor: '#ffffff',
                    });
                    $container.on('scroll', moveBar);
                }

    实现原理:容器滚动多远,通过scroll事件,让固定的容器位移一个多远

  • 相关阅读:
    面试题9:斐波那契数列
    面试题5:从尾到头打印链表
    面试题4:替换空格
    AOP
    (转)父类与子类之间变量和方法的调用
    悲观锁和乐观锁
    Java实现冒泡排序、折半查找
    (转载)Java 自动装箱与拆箱、equals和==的比较
    编程之美:数组分割
    windows下perl的安装和脚本的运行
  • 原文地址:https://www.cnblogs.com/zhihou/p/10314452.html
Copyright © 2020-2023  润新知