Attempt to keep element in center of screen but contained in parent element

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, h开发者_StackOverflow社区owever, 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.

Keeping it vertically aligned but only displayed when the section is hovered wouldn't do the trick?

This sounds like a manual positioning. You could use jquery to get the size of the browserwindow, get the scroll offset of the parent and calculate the top of the tools acording to screensize and scrolloffset value of the parent.

I don't thin css can handle this alone.

You could also just use one toolbox for all sections and pass the parent element as parameter.

Best wishes

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.