html tener un bloque que se mueva con el scroll dentro de un area delapágina

Posted 2021-05-11

$(document).ready(function () {
    var upperline = $('#contenedor').offset().top - parseFloat($('#contenedor').css('marginTop').replace(/auto/, 0));
	var lowerline = $('#ellmiteinferior').offset().top - parseFloat($('#ellmiteinferior').css('marginTop').replace(/auto/, 0)) ;
    var viewwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    // viewwidth, se usa para que solo funcione si hay espacio: responsive, es opcional

    $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (viewwidth>900 && y>= upperline && y<=lowerline ) {
            // if so, ad the fixed class
            $('#quieroscroll').addClass('fixed');
        } else {
            // otherwise remove it
            $('#quieroscroll').removeClass('fixed');
        }
    });

} )
;

#quieroscroll {
  position: relative;
  //todos el formato del scroll
}

#quieroscroll.fixed {
  position : fixed;
  top: 0;
}

<div id="contenedor">
<div id="quieroscroll">
  <p>el contenido del scroll con imagnes u otras cosas <br>
  puede tner una imagen o lo que sea, su marginTop es el limite superior de la zona del scroll
  </p>
</div>
</div>
<div id="ellmiteinferior" >
  <p> el marginTop de este div se usa como el límite inferior de la zona del scroll</p>
</div>