如何让置顶的大图变小，最后粘在置顶？

Question

我想将我的网站分为两部分：包含大图像的页眉和包含其他图像、文本等的主要部分

当我滚动页面时，页眉上的大图应与主要部分一起滚动。在某一点，图像应该固定，主要部分在它后面滚动。

我尝试了一些不同的方法，但我无法正确组合位置、显示、顶部等。

这是我目前最接近的：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;
}

但是 scroll/fixed 位置之间的转换仍然存在问题。如果左侧菜单（浅蓝色）可以粘在一起，那就太好了！（也许还有其他问题？）

Answer 1

删除

min-height:1500px;

div高度将保持1500px；试试这个

.bottom {
    display:flex;
    background:#CFC;
}

这应该有效。

在滚动条的 <div class='bottom'> 部分添加 margin-top:200px;。

Answer 2

我将您的 fiddle 更新为以下内容：

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>

CSS

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

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

/* start new rules */

.active{
  position: fixed;
}

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

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

/* end new rules */

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

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') // remove class active as applicable
        T.style.top = '-'+e.pageY+'px';
        T.style.position = 'sticky';
        B.style['margin-top'] = '0';
    } else { // image should remain fixed
        T.classList.add('active') // add class active as applicable
        T.style.top = '-'+(imgH-hH)+'px';
    }
}

如何让置顶的大图变小，最后粘在置顶？

How to make large image on top get smaller and finally stick to the top?

html

javascript

css

sticky

HTML无变化

CSS

Javascript