固定DIV定位的問題

我一直對我的報告模板，並無法弄清楚的細節位置包含（右側）：http://relevantcodes.com/Tools/ExtentReports2/ExtentJava210.html 固定DIV定位的問題

我有滾動的問題，對此我不能弄清楚。請參考下面的2個圖像：

滾動前：

滾動後：

在第二圖像，當滾動頂部注意額外的空間發生在左側大小（所有測試都存儲在這裏）。這是因爲DIV是固定的，但我想知道在向下滾動時是否有方法將其置於頂端？

另一個問題是，當我們打開菜單時（通過點擊左上角的條），左容器與右容器重疊。我該如何解決這個問題？使用js爲右容器設置一個新寬度是一個好方法？

很想聽聽您的建議，並希望找到一個優雅的解決這個問題，對此我無法弄清楚..

來源

2015-09-26 Anshoo

你想要正確的div被修復嗎？我的意思是它應該總是顯示？ –

，你說什麼是問題，但我想你忘了提到你的期望 –

Santhosh：是的，我想右側的容器div保持固定。左側包含用戶應該能夠滾動的測試，因爲它們可以有100個。右側有詳細信息，一次只能查看一個測試細節，因此在用戶滾動左側部分時應保持固定。希望澄清。 – Anshoo

問題1

1.去除.pinned { position: fixed !important;}在第6行中的文件（materialize.min.css）。
2.使用下面JS

$('.vh100').css('position', 'absolute')// to add aboslute position by default. 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 48) // nav bar height is 48 px 
    { 
    $('.vh100').css('position', 'fixed'); // add position fixed if scrolling is done and scroll top is greater than 48 px which is the nav bar 
    $('.vh100').css('margin-top', '-48px'); // when scroll up you have assign negative margin-top so that the space will not be appeared. 
    } else { 
    $('.vh100').removeAttr('style'); // remove margin-top 
    $('.vh100').css('position', 'absolute'); // and add position absolute 
    } 
});

問題2（ExternalJava210.html - >行：3273）

add和被點擊時.menu-toggle除去的.vh100位置。

來源

2015-09-26 05:29:41

J Santosh - 非常感謝，我能夠利用您的代碼（進行一些修改）並解決這兩個問題。還通過動態設置容器的寬度來解決菜單切換擴展問題。乾杯! – Anshoo

高興地幫助:) –

桑托斯 - 只是檢查，使用這種技術，圖像燈箱無法正常工作。在「使用媒體」測試中，如果我們點擊任何圖像，圖像不會完全顯示。將試圖找出這一個。乾杯。 – Anshoo

對於你的第一個問題，我相信你的唯一途徑」 d能夠通過javascript監聽器來實現這一點 - 偵聽用戶何時滾動並將位置從position:absolute/relative改爲position:fixed，然後向下滾動Ypx。 聲明：這可能是一種CSS方式，我不知道。

對於重疊的第二個問題，我會設置滑出的div爲position:absolute，以便不移動整個頁面（並且將資源重新繪製所有元素），它只會滑過其餘內容。也許背後有一個背景可以淡化背後的內容。

希望這會有所幫助。

來源

2015-09-26 03:22:33

弗拉德 - 謝謝！它的工作現在。 – Anshoo

如果您刪除第二列上的fixed位置，那麼您的第二個問題就會消失，所有事情都會在沒有該位置的情況下重新排列。我會說最好的辦法是從你的CSS中刪除.pinned規則，並用JS處理列的位置。

獲取導航和儀表板的高度（不管它是否可見），然後將結果高度與滾動位置進行比較。因此，您應該能夠將該列精確地放置在您想要的位置。

來源

2015-09-26 03:47:07 1cgonza

固定DIV定位的問題

回答

相關問題