嘗試將元素保留在屏幕中央但包含在父元素中

我們有一個腳本用於內聯編輯某些文件。基本上，每個文件都被分解爲多個部分，並且在一個部分上方懸停會出現一組工具（只是帶有圖像按鈕的div），您可以使用該工具編輯該特定部分。我們將父元素（部分）設置爲position: relative，將一組工具設置爲position:absolute，它們設置在該部分的右側。這一切都很好，特別是因爲其中很多都很小。嘗試將元素保留在屏幕中央但包含在父元素中

但是，我們確實有很多這些部分可能會變得非常大，達到兩個屏幕的長度甚至更多。在這些情況下，我們希望工具能夠根據用戶的滾動進行排序，因此，如果用戶正在查看該部分的垂直中間，則按鈕也將停留在垂直中間，但是，如果垂直用戶屏幕的中心滾動通過該部分，但用戶仍然懸停在該部分上，我們希望這些工具保留在其父元素內，不能彈出。

我們已經有一個腳本來移動一個元素與用戶的滾動，如果它不在屏幕上，所以我想我可以修改一下這樣做，我只是不知道如何限制元素由它的父母。

TL; DR：我將如何創建一個試圖在用戶窗口中垂直居中但不能離開其父元素的元素。

來源

2011-07-08 shmeeps

這裏有一個快速的實現，我想出了基於安德烈亞斯的建議

$(window).scroll(function(){ 
    var a = $(window).scrollTop() + ($(window).height() * .35); 
    var b = $("#movedelement"); 
    var c = $(window).scrollTop() + ($(window).height() * .48); 

    if (a < (b.parent().offset().top + 8)) 
     b.css({position: "absolute", top: "1em" }); 
    else if (c > (b.parent().offset().top + b.parent().height() - 8)) 
     b.css({position: "absolute", top: b.parent().height() - 100 }); 
    else 
     b.css({position: "fixed", top: "35%" }); 
}

圍繞調整一些數字爲元素的高度。髒，但工作。

來源

2011-07-08 15:29:05 shmeeps

保持它垂直對齊，但只有當部分被徘徊時顯示不會訣竅？

來源

2011-07-08 14:05:52

不，該部分不能保證在屏幕中間，因爲其中許多可能只有一行文字。這些工具也隱藏在沒有部分懸停的情況下，所以如果他們在部分之外就不可能找到他們。同一組按鈕也被共享和重用，因此如果沒有它們在正確的位置，用戶將無法確定他們實際正在編輯哪個部分。 – shmeeps

然後，您可以嘗試使其位置：固定;一旦它離開屏幕。但它會涉及jQuery，或者至少是JS。看到一個簡化的例子[這裏]（http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-被滾動到），但這只是一個解決方法。 –

這聽起來像是手動定位。您可以使用jquery獲取browserwindow的大小，獲取父級的滾動偏移量，並根據父級的屏幕大小和滾動偏移值計算工具的頂部。

我不瘦css可以單獨處理這個。

您也可以對所有部分使用一個工具箱，並將父元素作爲參數傳遞。

最良好的祝願

來源

2011-07-08 14:08:38

嘗試將元素保留在屏幕中央但包含在父元素中

回答

相關問題