javascript - 向左或向右滚动时在固定表上有垂直滚动但没有水平滚动

Question

我有一个 html 固定设计，它有一个居中对齐的表格，它提供了可垂直和水平滚动的大量数据。 对于垂直滚动，我克隆了表格标题并将它们放置在报告表格上方的新固定表格中(借助 jquery clone() 和 append() 函数以及 CSS 固定位置)，当用户滚动时以这种方式垂直报告，那么他仍然可以看到列标题。 现在的问题是，当他向右滚动时，固定表格也会滚动，因此标题与列不对齐，我怎样才能以水平滚动不会使固定表格也滚动的方式制作新的固定表格向右。 固定表将其父级作为浏览器窗口。 我有一个 jsfiddle 示例，但当此示例中有滚动时我无法显示标题，在我的网站中，当有垂直滚动时它会显示 http://jsfiddle.net/wnxJ4/8/

var tableOffset = $("#table1").offset().top - 10;
var $header = $("#table1 ").clone();
var $fixedtablehead = $("#fixedtablehead").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    if (offset >= tableOffset && $fixedtablehead.is(":hidden")) {
        $fixedtablehead.show().css({width: $('#table1').width()});
    }
    else if (offset < tableOffset) {
        $fixedtablehead.hide();
    }
});

我正在尝试为水平滚动实现以下代码，但我无法正确理解

var position = $(window).scrollLeft();
var lef=$('#fixedtablehead').offset().left;
   alert(lef); 
   alert(lef-position);
   $('#fixedtablehead').css('left',lef-position-position);

Answer 1

我认为你需要将表格和标题放在一个 div 中，那个 div 放在另一个带有滚动条的 div 中，那个 div 有一个固定的位置，标题应该绝对定位在顶部，然后当你滚动时，你滚动整个 div(table+header)，header 也移动

布局:

<div> <-fixed
  <div> <-scrollable
    <table> <-header
    <table> <-content

http://jsfiddle.net/bba5g/

编辑:你应该将内容表放在一个只有垂直滚动的 div 中，这样你就可以滚动内容