Question

We have a script used to edit certain files inline. Basically, each file is broken down into sections, and hovering over a section will bring up a set of tools (just a div with image buttons) that you can use to edit that particular section. We have the parent elements (sections) set as position: relative, and the set of tools set as position:absolute which are set to the right side of the section. This all works fine, especially since many of these are rather small.

However, we do have many of these sections which can become quite large, reaching lengths of two screens or even more. In these cases we would like for the tools to sort of flow with the user’s scrolling, so say if the user is looking at the vertical-middle of the section, the buttons will rest at the vertical middle as well, however, if the vertical center of the user’s screen scrolls past the section but the user is still hovering over the section, we would like for the tools to remain within their parent element and not be able to pop out.

We already have a script to move an element with the user’s scroll if it goes out of the screen, so I was thinking I could modify that a bit to do that, I’m just not sure how to bound the element by it’s parent.

TL;DR: How would I create an element that attempts to be vertically centered in the user’s window, but cannot leave it’s parent element.

Answer 1

Here’s a quick implementation I came up with based on Andreas’s suggestion

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

Tweak some numbers around for the element height. Dirty, but works.