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

  • 相关阅读:
    Setvlet基础(三) ServletContext
    Servlet基础(二) Servlet的生命周期
    Servlet基础(一) Servlet简介 关键API介绍及结合源码讲解
    JS执行队列
    this指向问题
    发送短信案例
    倒计时
    2:定时器
    1_2:调整窗口大小事件 [ onresize ]
    1_1:页面加载事件 [ window.onload ]
  • 原文地址:https://www.cnblogs.com/zhihou/p/10314452.html
Copyright © 2011-2022 走看看