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