製作可在x和y軸上滾動的日曆組件

我使用自己的HTML/CSS創建日曆組件。
水平方向（x軸）上可以有多個類別，垂直方向最多有24個時間槽（y軸）。製作可在x和y軸上滾動的日曆組件

垂直滾動時類別標題必須始終可見，並且在水平滾動時時間段必須始終可見。

如何通過css實現這一目標？

查看我想要的截圖（跨越標題的圖像更多跟蹤導致內容溢出）。 enter image description here

也許把這個作爲我的sinple HTML結構：

<div class="calendar"> 
    <div class="calendarColumnHeaders"></div> 
    <div class="calendarGrid"> 
     <div class="timeSlotsColumn"></div> 
     <div class="tracksContainer"></div> 
    </div> 
</div>

感謝

來源

2013-09-27 Thomas Buckley

給<div class="tracksContainer"></div>稱爲stick

一個額外的類添加此的CSS：

.stick { 
    position:fixed; 
    top:0px; 
}

不幸的是，你需要一些jQuery的

jQuery的 - 計算貼紙div的位置，使頁面是否已經遠遠滾動其位置固定。

$(document).ready(function() { 
    var s = $(".tracksContainer"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
     if (windowpos >= pos.top) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
});

來源

2013-09-27 17:41:32

Thanks C Travel。這使我指出了正確的方向。我使用x和y滾動條向scrollContainer div添加了一個滾動事件處理程序，然後在用戶滾動主容器（tracksContainer）時使用scrollTop（）和scrollLeft（）屬性來調整我的軌道標題和時間。 –

-1

overflow-x: scroll; //horizontal 
overflow-y: scroll; //vertical

來源

2013-09-27 13:46:40 Bip

製作可在x和y軸上滾動的日曆組件

回答

相關問題