jQuery中心div在父div的可见区域

Question

I have a <div> that I am trying to vertically center in the visible area of its parent <div> . Here is an image exemplifying what I am trying to accomplish. The child <div> is represented by the white circle, the parent <div> is the grey rectangle and the white rectangle is the browser's viewport.

The issue that I'm having is with writing the formula for positioning the child <div> when the browser scrolls or is resized. For any sized child or parent <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

I figured out the solution, a working example can be found here https://jsfiddle.net/uzbyy7dw/6/ .

Nearly all my original calculating was scrapped. My new approach was to determine whether the top edge of the parent <div> was outside the browser's viewport and then calculate the vertical center position for the child <div> based on whether the parent's bottom edge was outside the viewport.

Please note that the child <div> is has an absolute position within the parent <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+st), // 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=hr, 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 ){ /* 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)+st; }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 */ if( 0 < b ){ /* 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{ /* 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>