zoukankan      html  css  js  c++  java
  • 表格头部固定,内容里面第一列固定,不固定的超过显示滚动条

    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事件,让固定的容器位移一个多远

  • 相关阅读:
    [AngularJS] Html ngSanitize, $sce
    [AngularJS] ngModelController render function
    [MODX] 3. Placeholder +
    [MODX] 2. Chunks $
    HTTP-Runoob:HTPP Content-Type
    HTTP-Runoob:HTTP状态码
    HTTP-Runoob:HTTP请求头信息
    HTTP-Runoob:HTTP请求方法
    HTTP-Runoob:HTPP消息结构
    HTTP-Runoob:HTTP简介
  • 原文地址:https://www.cnblogs.com/zhihou/p/10314452.html
Copyright © 2011-2022 走看看