div fijo en la parte inferior de la página que se detiene en un lugar dado

Question

He arreglado div en la parte inferior de la página que funciona bien. Me pregunto si hay alguna manera simple de hacer que se "pare" en algún lugar de la página cuando el usuario se desliza hacia ella. Quiero que permanezca fijo en la parte inferior, hasta que el usuario se desplaza hacia abajo a un lugar definido en la página y luego lo pega a la página y se desplaza como el resto del contenido. ¿Alguna sugerencia?

Answer 1

He intentado configurar algo en jsfiddle. Mientras escribía, veo que otros han publicado sus alternativas. En caso de que el mío ayude de alguna manera: http://jsfiddle.net/PnUmM/1/

Configuré la posición relativa en el CSS, calculo dónde está en la carga del documento para mantener la información a un lado y luego establecerlo en fijo.

var sticky_offset; 
$(document).ready(function() { 

    var original_position_offset = $('#sticky_for_a_while').offset(); 
    sticky_offset = original_position_offset.top; 
    $('#sticky_for_a_while').css('position', 'fixed'); 


}); 

$(window).scroll(function() { 
    var sticky_height = $('#sticky_for_a_while').outerHeight(); 
    var where_scroll = $(window).scrollTop(); 
    var window_height = $(window).height(); 


    if((where_scroll + window_height) > sticky_offset) { 
     $('#sticky_for_a_while').css('position', 'relative'); 
    } 

    if((where_scroll + window_height) < (sticky_offset + sticky_height)) { 
     $('#sticky_for_a_while').css('position', 'fixed'); 
    } 

}); 

Answer 2

Tengo un complemento que hace lo contrario: está en el flujo de la página web, y cuando el usuario se desplaza pasando, se fija a la ventana gráfica. Sin embargo, lo que realmente hace es aplicar una clase css al elemento, por lo que debería poder usarlo tal cual.

puede encontrar el plugin aquí: https://github.com/hanssonlarsson/jquery-fixedscroll

entonces sugeriría que tenga su elemento en el flujo de su página web:

<div id="sometimesFixed">content</div> 

con CSS:

#sometimesFixed { 
    position: fixed; 
    bottom: 0; 
} 
#sometimesFixed.scroll { 
    position: static; 
} 

Y aplique el complemento como tal, en su JavaScript:

$('#sometimesFixed').fixedscroll({className: 'scroll'}); 

También hay un complemento más general, muy nuevo, llamado jquery-waypoints. La idea es vincular cualquier código a "puntos de ruta", puntos en la página web donde, cuando el usuario se desplaza más allá de ellos, se ejecuta algún código.

https://github.com/imakewebthings/jquery-waypoints

es probablemente más optimizado y un mejor ajuste que mi plugin, pero tu caso es distinto!

Answer 3

Lo hice por usted: http://jsfiddle.net/XCYFG/1/.

$(document).ready(function() { 
    window._div1 = $('#div1'); //selector is expensive 
    window._window = $(window); 
    $(window).scroll(function(e) { 
     _div1.css("top", 
        Math.min(_window.height(), 
          window.scrollY + 100) 
        + _window.height() - _div1.height() - 110); 
    }).scroll(); 
});