Sincronizar Scroll

Sincronizar scroll de dos divs

by Eduardo Lázaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina">
    <p class="cabeceraPagina">CABECERA PAGINA</p>
	
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis varius augue, sit amet malesuada nisi elementum eu. Nulla orci ex, elementum ac erat eu, pellentesque vestibulum lectus. Pellentesque gravida lectus ut fermentum pretium. Vestibulum varius dapibus nisl, nec dignissim lectus maximus molestie. Mauris tempor pretium ante, et vulputate odio fringilla sit amet. Nunc eget neque ullamcorper, pretium magna eu, eleifend lorem. Duis id dui euismod, viverra sem vitae, ultrices augue. Phasellus consectetur ligula non orci lacinia ornare. Vivamus vitae lacus erat. Donec dolor nunc, commodo eu ante ut, tincidunt bibendum ipsum.</p>

  <p>Nullam enim neque, congue ut odio sed, vehicula ornare dolor. Fusce tempor libero ac tincidunt sollicitudin. Sed in velit iaculis, iaculis enim et, lobortis justo. Pellentesque at blandit turpis. Ut venenatis tincidunt eros id porta. Praesent vel cursus justo. Phasellus odio felis, cursus at nunc in, condimentum faucibus mi.</p>

  <p>Aliquam sit amet sapien augue. Praesent lectus magna, ultricies vel ultrices non, feugiat et massa. Aliquam imperdiet orci a eros malesuada sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel porttitor odio, dignissim maximus urna. Nullam congue, dui at venenatis venenatis, erat augue pulvinar nisl, id tincidunt purus est a nisi. Praesent magna ligula, eleifend eget mollis sit amet, condimentum vel diam. Phasellus venenatis, magna eget dictum euismod, quam mi ullamcorper lacus, ut fermentum quam quam a ante.</p>

  <p>Nam volutpat massa id ante elementum, nec ultricies diam venenatis. Pellentesque ultrices rhoncus pellentesque. Aenean eu sapien erat. Nunc vitae luctus elit. Aenean nec lectus vitae elit mollis tristique vel eu lorem. Nunc nisl erat, vehicula eget...

CSS

body {
    position: relative;
    margin: 0 auto;
}

#pagina {
    position:relative;
    width: 550px;
}

#pagina p {
    text-align: justify;
}

#bloque {
    background: #027EBA;
    display: block;
    width: 200px;
    height: 100%;
    position: fixed;
    right: 20px;
    top:0;
    overflow: hidden;
}

.cabeceraPagina, .piePagina {
    display: block;
    width: 100%;
    margin: 0 auto;
    background: red;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.cabeceraBloque, .pieBloque {
    display: block;
    width: 100%;
    margin: 0 auto;
    background: green;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

JavaScript

$(window).scroll(function() {
	var pagH = $('#pagina').height() - $(this).height();
  var pagT = this.scrollY - $('#pagina').offset().top;
        
 	$('#bloque').scrollTop(pagT / pagH * ($('#alturaBloque').height() - $(this).height()));
});