¿Detener el desplazamiento de posición fija en un punto determinado?

94

Sin embargo, tengo un elemento que está en posición: fijo y, por lo tanto, se desplaza con la página como quiero. cuando el usuario se desplaza hacia arriba, quiero que el elemento deje de desplazarse en un punto determinado, por ejemplo, cuando está a 250 px de la parte superior de la página, ¿es posible? Cualquier ayuda o consejo sería útil gracias!

Tenía la sensación de que necesitaría usar jquery para hacerlo. Intenté obtener el desplazamiento o la ubicación de la ubicación del usuario, pero me confundí mucho, ¿hay alguna solución de jquery?

jquery css positioning Louise McComiskey
fuente
1
Hasta donde yo sé, solo una solución basada en javascript hará lo que quieras. No existe una solución CSS pura que haga eso.
cdeszaq

Respuestas:

124

Aquí hay un complemento rápido de jQuery que acabo de escribir que puede hacer lo que necesita:

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

Ver ejemplo de trabajo →

mVChr
fuente
Esto parece prometedor, sí, lo que pensé fue cambiar el posicionamiento en ciertos puntos, te dejaré saber cómo llego ¡Gracias!
Louise McComiskey
1
Hola, sí, muchas gracias, con algunos retoques para exactamente lo que quería y ahora está funcionando perfectamente gracias de nuevo.
Louise McComiskey
3
$('window')no debería estar entre comillas. Pero gracias por esto, fue muy útil.
jeff
137

¿Te refieres a algo así?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

Mostrar fragmento de código

James Montagne
fuente
¡Estupendo muchas gracias! Aunque mi tarea era crear el botón "Arriba" que siempre estaría encima del pie de página, modifiqué un poco este código. Vea mi versión aquí (js coffee): jsfiddle.net/9vnwx3fa/2
Alb
@James Montagne - ¿Cuál sería la solución para revertir este código si quisiera que el elemento fijo fondo adhesivo: 0; en el desplazamiento y luego se detiene 250px antes de que llegue al final de la página?
BoneStarr
1
@BoneStarr eso es un poco más complejo. Debería comparar el scrollTop actual con la altura de la página y la ventana gráfica. Luego, simplemente usaría el mismo código anterior, excepto con bottomy este valor calculado (compensado por 250) en el máximo.
James Montagne
@JamesMontagne - ¿Alguna posibilidad de que puedas desarrollar este violín? Realmente lo agradecería ya que estoy atrapado con este. jsfiddle.net/Hf5wH/137
BoneStarr
1
@bonestarr Considerablemente más complicado que este. Debería expandirlo a varias líneas de código o es realmente difícil de entender. jsfiddle.net/Hf5wH/139
James Montagne
19

Aquí hay un complemento de jquery completo que resuelve este problema:

https://github.com/bigspotteddog/ScrollToFixed

La descripción de este complemento es la siguiente:

Este complemento se usa para fijar elementos en la parte superior de la página, si el elemento se hubiera desplazado fuera de la vista, verticalmente; sin embargo, permite que el elemento continúe moviéndose hacia la izquierda o hacia la derecha con el desplazamiento horizontal.

Dada una opción marginTop, el elemento dejará de moverse verticalmente hacia arriba una vez que el desplazamiento vertical haya alcanzado la posición de destino; pero, el elemento seguirá moviéndose horizontalmente mientras la página se desplaza hacia la izquierda o hacia la derecha. Una vez que la página se ha desplazado hacia abajo más allá de la posición de destino, el elemento se restaurará a su posición original en la página.

Este complemento ha sido probado en Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para su caso particular:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});
bigspotteddog
fuente
1
Gracias, sí, esto parece realmente útil, utilicé una respuesta anterior ya que este proyecto fue hace un par de meses, sin embargo, definitivamente lo tendré en cuenta para proyectos futuros, parece más fácil, gracias :)
Louise McComiskey
6

Puede hacer lo que hizo James Montagne con su código en su respuesta, pero eso hará que parpadee en Chrome (probado en V19).

Puede solucionarlo si coloca "margin-top" en lugar de "top". Aunque realmente no sé por qué funciona con margen.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

Jure Ravlić
fuente
Esto también funciona muy bien para elementos fijos debajo del texto, he tenido un problema serio con pantallas pequeñas y mis elementos de desplazamiento fijos se ejecutan hasta la parte superior del navegador en áreas más pequeñas como 1024x768. Esto resolvió ese problema.
Joshua
2

mi solución 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
user3288218
fuente
2

En un proyecto, en realidad tengo un encabezado fijo en la parte inferior de la pantalla al cargar la página (es una aplicación de dibujo, por lo que el encabezado está en la parte inferior para dar el máximo espacio al elemento de lienzo en la ventana de visualización ancha).

Necesitaba que el encabezado se convirtiera en 'absoluto' cuando llega al pie de página en el desplazamiento, ya que no quiero que el encabezado esté sobre el pie de página (el color del encabezado es el mismo que el color de fondo del pie de página).

Tomé la respuesta más antigua aquí (editada por Gearge Millo) y ese fragmento de código funcionó para mi caso de uso. Con un poco de juego conseguí que esto funcionara. Ahora, el encabezado fijo se coloca maravillosamente sobre el pie de página una vez que llega al pie de página.

Solo pensé en compartir mi caso de uso y cómo funcionó, ¡y agradecerle! La aplicación: http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
joseph halconer
fuente
1

Escribí una publicación de blog sobre esto que presentaba esta función:

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
Nathan McGinness
fuente
0

Una solución que utiliza Mootools Framework.

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. Obtenga la posición (x & y) del elemento donde desea detener el desplazamiento usando $ ('myElement'). GetPosition (). X

    $ ('myElement'). getPosition (). y

  2. Para una especie de animación de desplazamiento, use:

    new Fx.Scroll ('scrollDivId', {desplazamiento: {x: 24, y: 432}}). toTop ();

  3. Para configurar el desplazamiento inmediatamente, use:

    new Fx.Scroll (myElement) .set (x, y);

Espero que esto ayude !! :RE

Zohaib
fuente
0

Me gustó esta solución 

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

mi problema fue que tuve que lidiar con un contenedor relativo a la posición en Adobe Muse.

Mi solución:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
leu
fuente
0

Código mVChr simplemente improvisado

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
Sreeraj
fuente
La razón para almacenar $(this)y $(window)en variables es para que solo tenga que hacer $this.height()y así sucesivamente. En lugar de establecer una posición superior, ¿no sería mejor si el complemento almacenara el valor superior original y volviera a él al establecer un ancho fijo? Además, ¿qué quieres decir con Just improvised mVChr code?
Cyclonecode
0

Adapté la respuesta de @ mVchr y la invertí para usarla para el posicionamiento de anuncios fijos: si lo necesita absolutamente posicionado (desplazándose) hasta que la basura del encabezado esté fuera de la pantalla, pero luego lo necesita para permanecer fijo / visible en la pantalla después de eso:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS:

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
cbmtrx
fuente
0

Me encantó la respuesta de @james, pero estaba buscando su inversa, es decir, detener la posición fija justo antes del pie de página, esto es lo que se me ocurrió

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

Así que ahora el elemento fijo se detendría justo antes del pie de página. y no se superpondrá con él.

mshahbazm
fuente