Javascript 水平滚动时如何固定左div，垂直滚动时如何固定top（类似Excel）？

我想做一些类似excel的工作。垂直滚动时固定顶部标题，水平滚动时固定左侧“标题”

这是我的HTML与嵌入样式和CSS之后

html:

试试这个：

CSS:

.HeaderRow {
position:fixed;//For vertical purposes
}

Javascript（JQUERY）：

如果要修复另一个类或div，请在代码中更改它。

尝试以下操作：

CSS:

.HeaderRow {
position:fixed;//For vertical purposes
}

Javascript（JQUERY）：

---

如果您想修复另一个类或div，请在代码中更改它。

定位修复和更多CSS，#在HTML中添加了summary div，这里有一个，如果这是您想要的

.leftPart {
  position: fixed;
  width:200px;
  float:left;
  z-index: 100;
}

.gantMainControl .header {
  position: fixed;
  left: 211px;
  width:90%;
  height: 40px;
  z-index: 100;
}

---

“定位固定和一些更多的CSS，#在HTML中添加了summary div，这里有一个，如果这是您想要的

.leftPart {
  position: fixed;
  width:200px;
  float:left;
  z-index: 100;
}

.gantMainControl .header {
  position: fixed;
  left: 211px;
  width:90%;
  height: 40px;
  z-index: 100;
}

---

在mario评论的帮助下，我已经能够使用两行javascript和css来完成这项工作

这是小提琴：

代码如下：

Javascript:

$('#resourceChart').scroll(function () {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

$('#resourceChart').scroll(function () {
    $(this).find('.stickyv').css('top', $(this).scrollTop());
});

HTML:

---

在mario评论的帮助下，我已经能够使用两行javascript和css来完成这项工作

这是小提琴：

代码如下：

Javascript:

$('#resourceChart').scroll(function () {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

$('#resourceChart').scroll(function () {
    $(this).find('.stickyv').css('top', $(this).scrollTop());
});

HTML:

---

它似乎在很大程度上起了作用。。。那么你所需要做的就是修复顶部标题？没错，问题是修复顶部标题的同时修复左侧标题。。。只有一个很简单，但是为他们两个做这件事…试试这个例子。我相信这和你正在寻找的东西很相似：[1][1]：是的。这不完全是我想要的，但我想我能应付。我会尝试一下，当我完成后，我会发布答案。非常感谢。它似乎在很大程度上起了作用。。。那么你所需要做的就是修复顶部标题？没错，问题是修复顶部标题的同时修复左侧标题。。。只有一个很简单，但是为他们两个做这件事…试试这个例子。我相信这和你正在寻找的东西很相似：[1][1]：是的。这不完全是我想要的，但我想我能应付。我会尝试一下，当我完成后，我会发布答案。非常感谢。谢谢，但是不，我不想把一切都修好。我想像马里奥在评论中说的那样，但双方都同意。我正在实施这个解决方案，谢谢，但不，我不想把所有的事情都修好。我想像马里奥在评论中说的那样，但双方都同意。我正在实现这个解决方案谢谢你，它与你在小提琴上给我的代码不兼容。我将继续实施Mario向我展示的解决方案。@skantanick对此我很抱歉，但我已经在本地主机上试用过，它对我很有效。它可以帮助某些人。最重要的解决方案是，您理解我用它编写代码的逻辑。Thx，我对最终解决方案做了类似的逻辑，用scrollLeft设置左位置，用scrollTop设置顶部位置。谢谢你，你在小提琴中给我的代码不起作用。我将继续实施Mario向我展示的解决方案。@skantanick对此我很抱歉，但我已经在本地主机上试用过，它对我很有效。它可以帮助某些人。最重要的解决方案是，您理解我用它编写代码的逻辑。Thx，我对最终解决方案做了类似的逻辑，使用scrollLeft设置左侧位置，使用scrollTop设置顶部位置。

<div id="resourceChart">
    <div id="mainSuperContainer">
        <div class="leftPart ui-resizable sticky">
            <div class="header"></div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>John Smith</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">My Second Work</div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>Bob Doe</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">Activity2</div>
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
        </div>
        <div class="gantMainControl " id="gantControl">
            <div id="gantHeader" class="header stickyv">
                <div class="headerRow">
                    <div class="headerRowYear" id="headerYear">
                        <div class="headerCellYear" style="width:547px">2013</div>
                    </div>
                </div>
                <div class="headerRow">
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:42px">F</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">A</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">J</div>
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:46px">A</div>
                    <div class="headerCellMonth" style="width:45px">S</div>
                    <div class="headerCellMonth" style="width:46px">O</div>
                    <div class="headerCellMonth" style="width:45px">N</div>
                    <div class="headerCellMonth" style="width:47px">D</div>
                </div>
            </div>
            <div id='mainTimelineContainer'>
                <div class="container summary" style="margin-top:0px;">
                    <div class="timelineContainer" style="width: 551px;">
                        <div class="summaryColumn" style="width:297px;">
                            <div>94%</div>
                            <div style="width:100%;height:3px;background-color:yellow;"></div>
                        </div>
                        <div class="summaryColumn last" style="width: 247px;">
                            <div>2%</div>
                            <div style="width:100%;height:3px;background-color:yellow"></div>
                        </div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:298.4375px;">92%</div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">2%</div>
                    </div>
                </div>
                <div class="container summary">
                    <div class="timelineContainer" style="width: 551px;">
                        <div class="summaryColumn last" style="width: 547px;">
                            <div>75%</div>
                            <div style="width:100%;height:3px;background-color:yellow"></div>
                        </div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">72%</div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">3%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

#mainTimelineContainer {
    padding-top:42px;
}
#mainSuperContainer {
    width:900px;
    position:relative;
}
.sticky {
    position:absolute;
    left:0;
    top:5;
}
.stickyv {
    position:absolute;
    left:0;
    top:5;
}
#resourceChart {
    width:600px;
    height:150px;
    overflow:auto;
}
.gantMainControl {
    padding-left:200px;
}
.gantMainControl .header {
    width:90%;
    height: 40px;
    z-index:1;
    padding-left:200px;
}

.leftPart {
    width:200px;
    float:left;
    z-index:2;
}
.leftPart .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:194px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;
}