Как исправить левый div при прокрутке по горизонтали и исправить верх при прокрутке по вертикали (например, Excel)?

Я хочу сделать что-то вроде excel. Если верхний заголовок зафиксирован при прокрутке по вертикали, а мой левый «заголовок» фиксируется при прокрутке по горизонтали.Как исправить левый div при прокрутке по горизонтали и исправить верх при прокрутке по вертикали (например, Excel)?

Вот мой HTML с вложенным стилем и CSS после этого

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

источник

2013-09-05 Hemadeus

Похоже, что это работает по большей части ... так что все, что вам нужно сделать, это исправить верхний заголовок? – kunalbhat

Точно, проблема заключается в фиксации верхнего заголовка, если левая фиксированная ... Только одна простая, но для двух из них ... – Hemadeus

Попробуйте этот пример. Я считаю, что это то, что вы ищете: [1] [1]: http://stackoverflow.com/questions/16086812/horizontal-scrolling-with-sticky-div-that-stays-on-the -left-border? rq = 1 – 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; 
}

источник

2013-09-05 20:18:52 Hemadeus

рад видеть, что u нашел способ решить вашу проблему – mario

Попробуйте это:

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

Если вы хотите, чтобы исправить другой класс или ДИВ, пожалуйста, измените его в коде.

источник

2013-09-05 19:05:03

Спасибо, что он не работал с кодом, который вы мне дали в скрипке. Я продолжу реализацию решения, которое Марио показал мне. – Hemadeus

@skantanick Прошу прощения за это, но я попробовал это на своем локальном хосте, и это сработало для меня, это могло бы помочь некоторому телу самое главное, тогда решение состоит в том, что вы понимаете логику, которую я написал с ней. –

Thx, я сделал одну и ту же логику с моим окончательным решением, используя настройку левого положения с помощью scrollLeft и установив верхнюю позицию с помощью scrollTop. – Hemadeus

фиксированное положение и еще несколько CSS, #summary ДИВ добавлены в HTML, вот Fiddle, если это то, что вы хотите ...

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

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

источник

2013-09-05 19:11:12 mdesdev

Спасибо, но нет, я не хотел, чтобы все исправлено. Я хочу, чтобы Марио добавил комментарий, но обе стороны. Я реализую это решение – Hemadeus

Как исправить левый div при прокрутке по горизонтали и исправить верх при прокрутке по вертикали (например, Excel)?

ответ

Смежные вопросы