Question

继续this example，我希望将图像集中在顶部div中，以便在页面滚动时，图像的中心始终显示在其上。

要实现这一点，我需要调整顶部div的大小，而不是仅仅移动它。但是当我调整大小时，图像会溢出div，除非我使用overflow：hidden。问题是，溢出：隐藏only works与位置：相对。但这打破了整个布局。

如何将图像置于顶部div中心并仍然像here一样滚动？

HTML

object A {
  implicit def intToA(n: Int): A = A(n)
}

case class A(x: Int = 0) {
  def +(that: A): A = A(this.x + that.x)
}

val a = A(1) + A(2)  // A(3)
val b = 1 + A(1)     // A(2)
val c = A() + 1      // A(1)
val d = 1 + 1        // 2

的JavaScript

<body onscroll='scroll(event)'>
  <div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
  <div class='bottom' id='bottom'>
    <div class='menu'>Menu</div>
    <div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
  </div>
</body>

CSS

function scroll(e) {
    var T = document.getElementById('top');
  var B = document.getElementById('bottom');
    var imgH = T.clientHeight; // header image height
    var hH = 200; // fixed header height
    if (imgH-e.pageY > hH) { // image is scrolling
    T.classList.remove('active')
        T.style.top = '-'+e.pageY+'px';

        T.style.position = 'sticky';
    B.style['margin-top'] = '0';
    } else { // image should remain fixed
    T.classList.add('active')
        T.style.top = '-'+(imgH-hH)+'px';
    }
}

Answer 1

像这样，绝对定位

 fun <- function(t = 2, N = 20){ ;

   ncp = rt(1, N - 1, t);
   CI.ncp(t = ncp, N = 20);
   }

  R <- 1e4 ;
  sim <- t(replicate(R, fun()));
  coverage <- mean(sim[,1] <= 2 & 2 <= sim[,2])

Answer 2

我终于设法解决了！

HTML

<body onscroll='scroll(event)'>
  <div class='top' id='top'><img id='imgTop' src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
  <div class='bottom' id='bottom'>
    <div class='menu' id='menu'>Menu</div>
    <div class='main' id='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
  </div>
</body>

的JavaScript

function scroll(e) {
    var T = document.getElementById('top');
    var B = document.getElementById('bottom');
    var M = document.getElementById('menu');
    var A = document.getElementById('main');
    var I = document.getElementById('imgTop');
    var imgH = T.clientHeight; // header image height
    var hH = 100; // fixed header height
    if (imgH-e.pageY > hH) { // scrolling
        T.style.top = '-'+e.pageY+'px';
        I.style.top = (e.pageY/2)+'px';
        A.style.paddingLeft = 0;
        B.style.marginTop = 0;
        M.style.position = 'sticky';
    } else { // fixed
        T.style.top = '-'+(imgH-hH)+'px';
        A.style.paddingLeft = '100px';
        M.style.position = 'fixed';
        M.style.top = hH+'px';
        M.style.bottom = 0;
    }
}

CSS

html, body {
    margin:0;
}
body {
    overflow-y:scroll;
    overflow-x:hidden;
}
#imgTop {
    display:block;
    position:relative;
}
.top {
    background:#FCC;
  display:block;
    top:0;
  position: sticky;
    overflow:hidden;
}
.bottom {
    display:flex;
    background:#CFC;
}
.menu {
    min-width:100px;
    background:#CCF;
}

JSFiddle：https://jsfiddle.net/aor0abhf/3/

如何在没有位置的div内裁剪/居中图像：相对？

2 个答案: