保持DIV可見滾動時只有第二個div是鑑於

我有以下的（簡化）的HTML代碼：保持DIV可見滾動時只有第二個div是鑑於

<div> 
..stuff... 
</div> 
<div class="subtitle" id="charts-title"> 
    <h3>Charts for d/m/y</h3> 
</div> 
<div class="content" id="charts"> 
    ...various charts... 
</div> 
<div> 
...more stuff... 
</div>

因此，＃圖表，標題是不是在頁面的頂部，也不#charts在底部，它們位於頁面中間的某個位置。現在，當用戶向下滾動時，＃charts-title離開屏幕，然後我看到沒有日期信息的圖表。只有在#charts在視圖中時，我纔想讓＃charts-title可見。

感謝您的任何幫助， Hector。

來源

2014-12-29 Héctor Urbina Saavedra

您需要爲此支付JavaScript。 – j08691

jQuery爲這種類型的操作提供工具 –

您可能想看看[這個與表標題相似的問題]（http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top -of-窗口時視-A-大表） – fracz

這使得它：

<div> 
..stuff... 
</div> 
<div class="subtitle" id="float-charts-title" style="display:none; position:fixed; top: 0; z-index:100; background-color:white"> 
    <h3>Charts for d/m/y</h3> 
</div> 
<div class="subtitle" id="charts-title"> 
    <h3>Charts for d/m/y</h3> 
</div> 
<div class="content" id="charts"> 
    ...various charts... 
</div> 
<div> 
...more stuff... 
</div> 

<script> 
    $(window).scroll(function(){ 
    var rectTitle = $("#charts-title")[0].getBoundingClientRect(); 
    var rectCharts = $("#charts")[0].getBoundingClientRect(); 
    if (rectTitle.bottom < 0 && rectCharts.bottom > 0) { 
    $("#float-charts-title").css("display", "block"); 
    } else { 
    $("#float-charts-title").css("display", "none"); 
    } 
}); 
</script>

感謝您的幫助。

來源

2014-12-30 20:18:45

保持DIV可見滾動時只有第二個div是鑑於

回答

相關問題