Pregunta Mantenga un elemento fijo dentro de un contenedor durante el desplazamiento de la ventana


Tengo una pregunta que creo que se explicará mejor con una imagen, así que la voy a adjuntar.

enter image description here

Ok, básicamente, lo que tengo es un contenedor padre y un elemento dentro (realmente será un bloque de texto), al que nos referiremos como el elemento FIJO.

Cuando el usuario está en la parte superior de la página, quiero que el elemento fijo esté en la parte superior de su elemento principal. Cuando el usuario comienza a desplazarse hacia abajo por la página, y el padre comienza a moverse hacia arriba en el puerto de visualización, quiero que el elemento fijo siga el desplazamiento hasta que llegue al final de su elemento primario, luego se detiene allí.

Actualmente no hay HTML ni nada para esto todavía, porque estoy en la etapa de boceto aproximado de este sitio web.

Estoy abierto a usar jQuery o javascript en general, mis habilidades de JS son limitadas, y estoy familiarizado con jQuery, pero no me importa copiar y pegar código y jugar con él.

Cualquier ayuda será apreciada. ¡Gracias!


12
2018-02-09 19:51


origen


Respuestas:


Lo que quiere hacer con javascript (con o sin jQuery) es cambiar la posición del elemento absolutamente en contra de la posición del elemento primario, el elemento primario debe ser relativo. Cambia la posición según la posición de la barra de desplazamiento.

Este tutorial tiene una buena explicación de cómo lograr eso.

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/


3
2018-02-09 19:54



Para algunas páginas receptivas o cuando cambia el tamaño de su navegador, las barras laterales se convierten en un elemento central. por lo que es posible que desee cuidar un punto de freno. Usé 786. Además, el div inicialmente no se puede colocar en la parte superior, por lo que debe establecer un desplazamiento por código.

<script>
    $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv");
        var $div_top = $scrollingDiv.offset().top;
        $(window).scroll(function(){
            if(window.outerWidth > 786) {
                var $scroll_top = $(window).scrollTop();
                if($scroll_top > $div_top) {
                    $pos = $scroll_top - $div_top;
                    $scrollingDiv
                        .stop()
                        .animate({"top": $pos + "px"}, "slow" );
                } else if($('#scrollingDiv').offset().top > $div_top) {
                    $scrollingDiv
                        .stop()
                        .animate({"top": "0px"}, "slow" );
                }
            } else {
                $scrollingDiv.css("top", 0); // sidebar became center object
            }
        });
        $(window).resize(function() {
            if(window.outerWidth > 786) {
                var $scroll_top = $(window).scrollTop();
                if($scroll_top > $div_top) {
                    $pos = $scroll_top - $div_top;
                    $scrollingDiv
                        .stop()
                        .animate({"top": $pos + "px"}, "slow" );
                } else if($('#scrollingDiv').offset().top > $div_top) {
                    $scrollingDiv
                        .stop()
                        .animate({"top": "0px"}, "slow" );
                }
            } else {
                $scrollingDiv.css("top", 0); // sidebar became center object
            }
        });
    });
</script>

0
2018-05-24 12:56