如何在無位置的div內裁剪/居中：相對？

繼續this example，我想集中在頂部div中的圖像，因此，當頁面滾動時，圖像的中心總是出現在它上面。如何在無位置的div內裁剪/居中：相對？

爲了實現這一點，我需要調整頂部div，而不是僅僅移動它。但是當我調整大小時，圖像會溢出div，除非我使用overflow：hidden。問題是，溢出：隱藏only works與位置：相對。但是這打破了整個佈局。

我該如何將圖像居中頂部的div，仍然讓它滾動像here？

HTML

<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>

的JavaScript

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'; 
    } 
}

CSS

html, body { 
    margin:0; 
} 
body { 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 
img { 
    display:block; 
} 

.top { 
    background:#FCC; 
    display:block; 
    top:0; 
    position: sticky; 
} 

.active{ 
    position: fixed; 
} 

.active ~ .bottom { 
    margin-top: 386px; 
    padding-left: 100px; 
} 

.active ~ .bottom .menu { 
    position: fixed; 
    top: 200px; 
    bottom: 0; 
    left: 0; 
} 

.bottom { 
    display:flex; 
    min-height:1500px; 
    background:#CFC; 
} 
.menu { 
    min-width:100px; 
    background:#CCF; 
}

來源

2017-08-09 Rodrigo

像這樣，絕對定位

.yourElementGoesHere { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

來源

2017-08-09 00:21:03 yoursweater

你能夠把它添加到給定的jsfiddle例子，並使其發揮作用？我不能。 – Rodrigo

是 - 您可能遇到的問題是它設置爲顯示：塊，寬度和高度未定義。如果你給它一些高度和寬度的規格，它將居中。 – yoursweater

你能提供一個工作的例子嗎？問題不僅僅在於影像的中心位置，而是以影像爲中心，以前的想法繼續發揮作用。 – Rodrigo

我終於設法解決了！

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/

來源

2017-08-09 04:02:37 Rodrigo

如何在無位置的div內裁剪/居中：相對？

回答

相關問題