javascript - jQuery将div置于父div可见区域的中心

Question

我有一个<div>我试图在其父项的可见区域中垂直居中 <div> 。 Here是一张图片，说明了我正在努力实现的目标。 child <div>由白色圆圈表示，父级 <div>是灰色矩形，白色矩形是浏览器的视口(viewport)。

我遇到的问题是编写定位子项的公式 <div>当浏览器滚动或调整大小时。适合任何体型的 child 或家长<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> 的顶部边缘是否位于浏览器视口(viewport)之外，然后计算子项 <div> 的垂直中心位置基于父级的底部边缘是否在视口(viewport)之外。

请注意 child <div> is 在父级 <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 ){
       	    /*
            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
        */
    	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>