How To Make Large Image On Top Get Smaller And Finally Stick To The Top?

I want to divide my website into two parts: a header containing a large image, and a main part, containing other images, text, etc. When I scroll the page, the large image on the h

Solution 1:

I updated your fiddle to the following:

No Change to HTML

<bodyonscroll='scroll(event)'><divclass='top'id='top'><imgsrc='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div><divclass='bottom'id='bottom'><divclass='menu'>Menu</div><divclass='main'><imgsrc='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

functionscroll(e) {
    var T = document.getElementById('top');
    var B = document.getElementById('bottom');
    var imgH = T.clientHeight; // header image heightvar hH = 200; // fixed header heightif (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';
    }
}

Solution 2:

Remove

min-height:1500px;

The div height will stay 1500px; Try this one

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

This should work.

Add margin-top:200px; on <div class='bottom'> part on scroll.