堆栈内存溢出
  繁体   English   中英

水平滚动时如何固定左div以及垂直滚动时如何固定顶部（类似于Excel）？

[英]How to fix left div when scrolling horizontally and fix top when scrolling vertically (Excel like)?

 原文  2013-09-05 18:12:46  4   3    javascript/ jquery/ html/ css

问题描述

我想做一些像excel的事情。 垂直滚动时固定我的顶部标题，水平滚动时固定我的左侧“标题”。

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

http://jsfiddle.net/qDFn8/1/

HTML： 

<div id="resourceChart">
    <div class="leftPart ui-resizable">
        <div class="header"></div>
        <div class="leftContainer">
            <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>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
    </div>
    <div class="gantMainControl" id="gantControl">
        <div class="gant-compareitem" style="margin-top:41px;width:138px;margin-left:368px;"></div>
        <div id="gantHeader" class="header">
            <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 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>

CSS： 

html{
        background-color: #FFFFFF;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

.leftPart {
    width:200px;
    float:left;
}

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

}

.toggleExpand {
    background-image: url(../../../Images/Icons/plus.png);
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.toggleMinus {
    background-image: url(../../../Images/Icons/minus.png);
    height: 16px;
    width: 16px;
    margin-top: 2px;
}
.leftPart .item {
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:194px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}

.leftPartselector {
    width: 30px;
    float: left;
}

.leftPartselector .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:24px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;

}


.leftPartselector .item{
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:24px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}


.leftPart .child {
    text-indent: 20px;
}

.gantMainControl {
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
}

.leftContainer {
    overflow-y: auto;
    overflow-x: hidden;
}

.gantMainControl .header {
    width:90%;
    height: 40px;
}

.gantMainControl .headerRow {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    height: 21px;
}

.gantMainControl .headerRow .headerCellMonth {
    margin-right:-2px;
    margin-top: -1px;
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
}
.gantMainControl .headerRow .headerCellYear {
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    text-align:center;
    margin-right:-1px;
}

.gantMainControl .headerRow .headerRowYear {
    display:inline-block;
    margin-bottom: -5px;
}

.gantMainControl .container {
    border: hidden 1px;
    margin-top: -1px;
    margin-left: 1px;
    height: 25px;
}

.gantMainControl .container .timelineContainer {
   display:inline-block;
    height: 24px;
}

.gantMainControl .container .timelineContainer:hover{
   background-color:#d0e9fa;
}


.gantMainControl .container .timeline {
    height: 18px;
    background-color: #97C9EB;
    text-align: center;
    line-height: 18px;
    margin-top: 1px;
    display: inline-block;
    vertical-align: bottom;
}

.gantMainControl .container .normal-timeline {
    border: 1px white solid;
}

.summaryColumn {
    height: 22px;
    color: white;
    text-align: center;
    display: inline-block;
    background-color: grey;
    border-right: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.summaryColumn div {
      white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div.ui-tooltip {
    max-width: 500px;
}
.tooltip {
    font-size: 10px;
}
.tooltip td {
    padding-right: 5px;
    padding-top: 5px;
}

.tooltip span{
    font-weight: bold;
    margin-right: 5px;  
}

.gantt-pager {
    padding-right: 4px;
    margin-top: 3px;
    margin-left: 15px;
}


.gant-compareitem {
    background-color: rgba(148, 202, 252, 0.3); /* browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#97C9EBff', endColorstr='#97C9EBff'); /* IE */
    height: 99%;
    z-index: 1;
    position: absolute;
    border-left: 2px solid purple;
    border-right: 2px solid purple;
}

3 个解决方案

解决方案1
 1  2013-09-05 19:05:03

尝试这个：

CSS： 

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

使用Javascript（JQUERY）： 

var posWas = $(window).scrollLeft();
$(window).bind('scroll', function(){
var posIs = $(window).scrollLeft();
if(posWas !== posIs){
//Scrolled Horizontal
$('.headerRow').css("position" , "relative");
$('.headerRow').css("left" , posIs );
$('.headerRow').css("position" , "fixed" );
posWas = posIs;//Save it for the Next Run
}
//Scrolled vertically keep as you are
});

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

解决方案2
 0  2013-09-05 19:11:12

位置固定，还有更多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;
}

解决方案3
 0 已采纳  2013-09-05 20:18:52

借助mario的注释，我已经能够使用2行javascript和css做到这一点。

这是小提琴：

http://jsfiddle.net/QBLdM/4/

这是代码：

使用Javascript： 

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

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

HTML： 

<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>

CSS： 

#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;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 垂直滚动时水平移动DIV 滚动时修复/取消Div 滚动时将导航栏修复到页面顶部 滚动时将对象固定到浏览器窗口的顶部 将内部div固定在外部div的顶部，并在滚动外部div时防止内部div在外部div上溢出 向下滚动时如何将标题固定在列表顶部？ 向下滚动时如何将主导航固定在顶部 当距离 &gt; 100 时，如何使用 jquery 和 css 修复滚动时的 div？ 滚动溢出的div时如何修复页面滚动冻结错误？ 垂直滚动时水平移动和水平设置精灵动画
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM