要素を画面の中央に維持しようとしましたが、親要素に含まれています

Question

特定のファイルをインラインで編集するためのスクリプトがあります。基本的に、各ファイルはセクションに分割され、セクション上にマウスを移動すると、その特定のセクションを編集するために使用できる一連のツール（画像ボタン付きのdiv）が表示されます。親要素（セクション）はposition: relativeに設定され、ツールセットはposition:absoluteに設定され、セクションの右側に設定されています。これはすべてうまくいきます。特にこれらの多くはかなり小さいからです。

しかし、これらのセクションの多くはかなり大きくなり、2画面以上の長さに達することがあります。このような場合、ツールがユーザーのスクロールでフローをソートするようにしたいので、ユーザーがセクションの垂直中央を見ている場合、ボタンは垂直中央にも置かれますが、垂直ユーザーの画面の中央がセクションを越えてスクロールしますが、ユーザーはセクション上にまだホバリングしていますので、ツールが親要素内に残っていて、飛び出すことはできません。

ユーザーのスクロールで要素を移動するスクリプトが既にあります。画面外に出た場合、要素をバインドする方法がわかりませんそれは親です。 012：DR：ユーザーのウィンドウ内で垂直方向の中央に配置しようとする要素を作成する方法はありますが、親要素を残すことはできません。

Answer 1

ここで私はアンドレアスの提案

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

要素の高さのために周りにいくつかの数字を微調整に基づいて思い付いた迅速な実装があります。汚いですが、動作します。

Answer 2

縦に整列されているが、セクションが上がったときにのみ表示されますが、そのトリックはありませんか？

Answer 3

これは手動での配置のようです。 jqueryを使用してブラウザウィンドウのサイズを取得し、親のスクロールオフセットを取得し、親のスクリーンサイズとスクロールオフセット値に基づいてツールの上部を計算することができます。

私はこれを単独で扱うことができる薄いCSSはありません。

すべてのセクションに対して1つのツールボックスを使用し、親要素をパラメータとして渡すこともできます。

お祈り申し上げます