jQuery Center div im sichtbaren Bereich der Eltern div

Question

Ich habe eine <div>, die ich versuche, im sichtbaren Bereich der Eltern <div> vertikal zu zentrieren. Here ist ein Bild, das beispielhaft zeigt, was ich zu erreichen versuche. Das Kind <div> wird durch den weißen Kreis dargestellt, das übergeordnete Element <div> ist das graue Rechteck und das weiße Rechteck ist das Ansichtsfenster des Browsers.

Das Problem, das ich habe, ist mit dem Schreiben der Formel für die Positionierung des Kindes <div>, wenn der Browser scrollt oder wird in der Größe geändert. Für jedes Kind oder Elternteil <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

dachte ich die Lösung aus, ein funktionierendes Beispiel gefunden https://jsfiddle.net/uzbyy7dw/6/ hier.

Fast alle meine ursprüngliche Berechnung wurde verschrottet. Mein neuer Ansatz war, um zu bestimmen, ob die Oberkante des übergeordneten <div> außerhalb des Ansichtsfenster des Browsers war und berechnen dann die vertikale Mittelposition für das Kind <div> basierend darauf, ob der Eltern unteren Rand außerhalb des Ansichtsfenster war.

Bitte beachten Sie, dass das Kind <div> ist eine absolute Position innerhalb der übergeordneten hat <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>