Question

我们有一个用于内联编辑某些文件的脚本。基本上，每个文件都分为几个部分，将鼠标悬停在一个部分上会显示一组工具（只有div带有图像按钮），您可以使用这些工具编辑该特定部分。我们将父元素（部分）设置为position: relative，将设置为position:absolute的工具集设置为部分的右侧。这一切都很好，特别是因为其中很多都很小。

但是，我们确实有很多这些部分可以变得非常大，达到两个屏幕甚至更长的长度。在这些情况下，我们希望工具能够根据用户的滚动进行排序，因此，如果用户正在查看该部分的垂直中间，那么按钮将停留在垂直中间，但是，如果垂直用户屏幕的中心滚过该部分，但用户仍然在该部分上空盘旋，我们希望这些工具保留在其父元素内，并且无法弹出。

我们已经有了一个脚本来移动一个元素，如果它离开了屏幕，用户的滚动，所以我想我可以修改一点来做那个，我只是不确定如何绑定元素这是父母。

TL; DR：我如何创建一个试图在用户窗口中垂直居中的元素，但不能保留它的父元素。

Answer 1

保持垂直对齐但仅在部分悬停时显示不会有效？

Answer 2

这听起来像手动定位。您可以使用jquery来获取browserwindow的大小，获取父级的滚动偏移量，并根据screenize和scrolloffset值计算工具的顶部。

我不瘦，css可以单独处理。

您也可以只为所有部分使用一个工具箱，并将父元素作为参数传递。

祝福

Answer 3

根据Andreas的建议，我提出了一个快速实现

$(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%" });
}

调整元素高度周围的数字。很脏，但有效。

尝试将元素保留在屏幕中心但包含在父元素中

3 个答案: