我想将我的网站分为两部分:包含大图像的标题和包含其他图像、文本等的主要部分。
当我滚动页面时,标题上的大图像应该与主要部分一起滚动。在某一时刻,图像应该变得固定,并且主要部分在其后面滚动。
我尝试了一些不同的方法,但我无法获得位置、显示、顶部等的正确组合来工作。
这是迄今为止我最接近的:https://jsfiddle.net/aor0abhf/ https://jsfiddle.net/aor0abhf/
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'>
<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 imgH = T.clientHeight; // header image height
var hH = 200; // fixed header height
if (imgH-e.pageY > hH) { // image is scrolling
T.style.top = '-'+e.pageY+'px';
T.style.position = 'sticky';
} else { // image should remain fixed
T.style.top = '-'+(imgH-hH)+'px';
T.style.position = 'fixed';
}
}
CSS
html, body {
margin:0;
}
body {
overflow-y:scroll;
overflow-x:hidden;
}
img {
display:block;
}
.top {
background:#FCC;
display:block;
top:0;
}
.bottom {
display:flex;
min-height:1500px;
background:#CFC;
}
.menu {
width:100px;
background:#CCF;
}
但滚动/固定位置之间的转换仍然存在问题。如果左侧菜单(浅蓝色)可以粘在一起,那就太好了! (也许还有另一个问题?)