查找可見部分，並把記在它上面

我有一個頁面的divs列表：查找可見部分，並把記在它上面

<div class="section"><span>Client Information </span> 
<!-- Some fields here --> 
</div> 
<div class="section"><span>Billing Information </span> 
<!-- Some fields here --> 
</div> 
<div class="section"><span>Contact Information </span> 
<!-- Some fields here --> 
</div>

當用戶滾動我想一個Note上的瀏覽器中可見部分的頁面頂部。

<div class="note">Note:Please fill all the required fields</div>

例如

當頁面加載和Client Infomation是可見部分。注意應該出現在客戶信息部分的頂部。
用戶向下滾動，Billing Information是可見部分。注意應顯示在「結算信息」部分的頂部。
當用戶下降到Contact Information部分時，注意應顯示在聯繫信息部分的頂部。
如果用戶滾動回Client Information部分，則應在客戶信息頂部顯示註釋。

重要1：注意DIV應該只出現在部分不重疊部分領域的頂部。

我嘗試使用

.note { 
position:fixed; 
width:100%; 
z-index:1080; 
}

但是，這使得筆記DIV重疊部分領域，我不知道。

重要提示2：部分div低於固定導航欄和徽標。這樣當第一部分可見時。注意div必須放置在徽標和第一部分之間。

來源

2013-10-28 Himanshu Yadav

什麼是'位置的問題：固定'？當筆記和div碰撞時會發生什麼？ – raam86

你需要一些JavaScript來檢測窗口是否已滾動超出了垂直note元素的偏移量，並應用position:fixed才把：

http://jsfiddle.net/bSZpf/

來源

2013-10-28 16:32:56 lxe

您的解決方案存在兩個問題。
1.導航欄它自己固定在上面。所以Note div隱藏在它後面。 2.在'width：100％'處注意div'在頁面上看起來不太好。因爲章節是寬度的60％，並在頁面中間。 –

@HimanshuYadav無論你喜歡，你都可以調整寬度/填充/位置。我不清楚你的頁面是如何佈置的，但是你可以將'top'調整到稍低一點以容納導航欄。另外，如果導航欄是固定的，是不是也覆蓋了部分？如果是這樣，您可以將「筆記」放置在導航欄中。我所演示的只是一個通常的概念，通常在類似於你的實例中完成。 – lxe

查找可見部分，並把記在它上面

回答

相關問題