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

Tengo un elemento que es position: fixed y así me desplazo con la página como quiera. cuando el usuario se desplaza, quiero que el elemento deje de desplazarse en cierto punto, por ejemplo cuando está a 250px desde la parte superior de la página, ¿es esto 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 donde está el usuario, pero me confundí realmente, ¿hay alguna solución de jquery?

Aquí hay un plugin jQuery rápido 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 →

¿Te refieres a algo como esto?

http://jsfiddle.net/b43hj/

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

Aquí hay un complemento 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 objective; pero, el elemento se moverá horizontalmente mientras la página se desplaza hacia la izquierda o hacia la derecha. Una vez que la página se haya desplazado hacia atrás más allá de la posición del objective, 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:

   $(document).ready(function() { $('#mydiv').scrollToFixed({ marginTop: 250 }); }); 

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

Puedes arreglar eso si pones “margin-top” en lugar de “top”. Realmente no sé por qué funciona con margin tho.

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

http://jsbin.com/idacel

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 canvas en la ventana gráfica ancha).

Necesitaba que el encabezado se convirtiera en ‘absoluto’ cuando alcanza el pie de página en desplazamiento, ya que no quiero el título 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í (corregida por Gearge Millo) y ese fragmento de código funcionó para mi caso de uso. Con algunos jugando, conseguí que esto funcionara. Ahora el encabezado fijo se encuentra muy por encima del pie de página una vez que alcanza el pie de página.

¡Solo pensé en compartir mi caso de uso y cómo funcionó, y decir gracias! 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); } 

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(); }); }; 

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); } }); }); 

Se puede lograr una posible solución CSS SOLAMENTE con la position: sticky;

El soporte del navegador es realmente bueno: https://caniuse.com/#search=position%3A%20sticky

aquí hay un ejemplo: https://jsfiddle.net/0vcoa43L/7/

Una solución que usa el Framework Mootools.

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

  1. Obtenga la posición (xey) del elemento donde desea detener el desplazamiento usando $ (‘myElement’). GetPosition (). X

    $ (‘myElement’). getPosition (). y

  2. Para un tipo de animación de desplazamiento use:

    nuevo Fx.Scroll (‘scrollDivId’, {offset: {x: 24, y: 432}}). toTop ();

  3. Para simplemente configurar el desplazamiento, use inmediatamente:

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

Espero que esto ayude !! :RE

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 de posición relativa en Adobe Muse.

Mi solución:

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

Código mVChr solo 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); 

Adapté la respuesta de @mVchr y la invertí para utilizarla para el posicionamiento de anuncios adhesivos: si la necesitas absolutamente posicionada (desplazándote) hasta que la basura del encabezado esté fuera de la pantalla, pero luego debes mantenerla fija / 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; } 

Me encantó la respuesta de @James pero estaba buscando su posición 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)); } 

Entonces ahora el elemento fijo se detendría justo antes del pie de página. y no se superpondrá con eso.