親divの可視領域にあるjQueryの中心div

Question

<div>私はその親の可視領域に垂直に中心を置くようにしています<div>。 Hereは私が達成しようとしているイメージの例です。子<div>は白い円で表され、親の<div>はグレーの矩形で、白い矩形はブラウザのビューポートです。

私が気付いている問題は、ブラウザがスクロールしたりサイズが変更されたときに、子の位置を決めるための公式を書いていることです。<div>任意のサイズの子供または親の場合<div>。

var scrollListener = function(){ 
    var child = $('.child'),  // child element 
    w=$(window).height,    // window height 
    s=$(window).scrollTop(),  // window scrollTop position 
    t=child.parent().offset().top, // parent position in window 
    h=child.parent().height(),  // parent height 
    p=(w+s-t),      // initial position 
    v=0;       // final value for child position 

    if(t<s){ 
     // top of parent is beyond viewport 
     if(p<h){ 
      // bottom of parent is also beyond viewport 
      v = (w/2)+s-t; 
     }else{ 
      // ??? - not working 
      // bottom of parent is within viewport 
      v = ((h-p)/2)+s-t; 
     } 
    }else{ 
     v = p/2; 
    } 
    child.css("top",v); 
}; 

$(window).on("scroll resize",scrollListener); 

Fiddle

Answer 1

私は、実施例がここにhttps://jsfiddle.net/uzbyy7dw/6/を見つけることができ、解決策を考え出しました。

ほとんどすべてのオリジナルの計算が廃止されました。私の新しいアプローチは親の<div>の上端がブラウザのビューポートの外にあるかどうかを判断し、親の下端がビューポートの外にあるかどうかに基づいて子の垂直中心位置を計算することでした。<div>

子<div>があることに注意してくださいは、親の中に絶対位置を持っている<div>

(function($){ 
 
var scrollListener = function(){ 
 
    $('.child').each(function(){ 
 
    var child = $(this),   // child div element 
 
    w=$(window).height(),   // window height 
 
    s=$(window).scrollTop(),  // window scrollTop position 
 
    t=child.parent().offset().top, // parent top edge 
 
    h=child.parent().height(),  // parent height 
 
    r=(w+s-t),      // parent's initial visible area 
 
    // parent's bottom edge in relation to the viewport 
 
    // calculated by the parent's height minus it's initial visible area 
 
    b=h-r,       
 
    v=0;       // final value for child position 
 
    if(t<s){ 
 
     /* 
 
     The amount scrolled is greater than the parent's offset 
 
     thus, the parent's top edge is outside the viewport 
 
     */ 
 
     if(0 < b){ 
 
     \t  /* 
 
      When the parent's bottom edge is greater than 0 then 
 
      it's bottom edge is below the bottom of the viewport 
 
      
 
      Since both the top and bottom edge exceed the viewport 
 
      some middle section of the parent is spanning the 
 
      full height of the viewport. The child's position will be 
 
      in the middle of viewport, but offset by the amount 
 
      scrolled minus the parent's top offset 
 
      */ 
 
      v = (w/2)+s-t; 
 
     }else{ 
 
      /* 
 
      The parent's top edge is outside the viewport, but the 
 
      bottom edge is within the viewport 
 
      
 
      Calculate the middle position by taking the amount scrolled 
 
      minus the parent's offset and the parent's height, which 
 
      will get the remaining visible area of the parent div, then 
 
      divide by two to get the middle 
 
      */ 
 
      v = (s-t+h)/2; 
 
     } 
 
    }else{ 
 
     /* 
 
     The parent's top edge is greater than the amount scrolled 
 
     thus, the parent top edge has not exceeded the viewport 
 
     */ 
 
    \t if(0 < b){ 
 
     \t  /* 
 
      When the parent's bottom edge is greater than 0 then 
 
      it is below the bottom of the viewport 
 
      
 
      Since the parent's top edge has not exceeded the viewport 
 
      and bottom edge HAS exceed the viewport, use the parent's 
 
      initial position determined by adding the window's height 
 
      and the amount scrolled then subtract the parent's offset. 
 
      
 
      Divide this position by two to get the middle of the 
 
      parent's visible area, unless the parent's top edge is 
 
      below the viewport's bottom edge then the parent is out of 
 
      view and the child will be too 
 
      */ 
 
      v = r/2; 
 
     }else{ 
 
     \t  /* 
 
      Both the top and bottom edges of the parent div are within 
 
      the viewport. Vertically center the child div within the 
 
      parent by dividing the parent's height by 2 to get its 
 
      middle 
 
      */ 
 
      v = h/2; 
 
     } 
 
    } 
 
    
 
    child.css("top",v); 
 
    }); 
 
}; 
 

 
$(window).on("scroll resize",scrollListener); 
 
scrollListener(); 
 
})(jQuery);

html,body { background:white; height:100%; } 
 
body{ margin-top:140%; } 
 
.middle-line { 
 
    position:fixed; 
 
    top:50%; 
 
    width:100%; 
 
    z-index:100; 
 
    border-top:1px solid #2495ec; 
 
} 
 
.parent1, .parent2 { 
 
    float:left; 
 
    width:30%; 
 
    margin-left:10px; 
 
    position:relative; 
 
} 
 

 
.parent1 { 
 
    background:#ccc; 
 
    height:120%; 
 
    margin-top:-50px; 
 
    } 
 
.parent2 { 
 
    background:#aaa; 
 
    height:50%; 
 
} 
 
.child { 
 
    background:#000; 
 
    color:#fff; 
 
    line-height:50px; 
 
    text-align:center; 
 
    position:absolute; 
 
    height:50px; 
 
    width:50px; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
} 
 
.other-stuff{ 
 
    height:800px; 
 
    clear:both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="parent1"> 
 
<div class="child"></div> 
 
</div> 
 
<div class="parent2"> 
 
<div class="child"></div> 
 
</div> 
 
<div class="other-stuff"></div> 
 
<div class="middle-line"></div>