js: elemento fijo que se colapsa
4 seguidores
Estoy tratando de recrear el efecto que se ve en esta página:
http://2009annualreport.rockefellerfoundation.org/
que el logo se "colapsa" al hacer scroll, y se mantiene fijo.
Preferentemente estoy buscando un plugfin para jquery, pero no lo encuentro- no sé muy bien qué términos buscar. He encontrado infinidad de plugins/métodos que te permiten mantener un elemento fijo, pero no que te permitan dejar x pixeles visibles.
Alguna idea?
kemie
finalmente obtuve un poco de ayuda, y pongo la solución aquí por si a alguien le sirve:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
kemie
hola andrewman, gracias por el tip! desempaqué el js, pero no estoy segura de entender cómo está funcionando. Trataré de descifrarlo, pero mis conocimientos de js son limitados....
gracias por la ayuda!
andrewman
Han creando un objeto APP que procesa el scroll de la ventana, cuando éste es mayor a 0, el contenedor del logo cambia el valor de la propiedad "top" (posición absoluta) de 0 a -110px. Las funciones están en application.min.js, si utilizas un "javascript unpacker" (hay un par de páginas con dicho funcionalidad, no es un programa) podrás apreciarlo mejor.
kemie
puf, esto esta pareciendo mas dificl de lo que imaginaba.... seguiré estudiandolo, gracias!
_cristian_quiros Plus
Échale un vistazo a jQuery Style. Tiene muchas posibilidades.
A mí me encantó esta Web
cloudstudio
No creo que exista nada automatico, de todos modos, si ves el codigo fuente esta usando 2 plugins .
<script src="/javascripts/jquery/jquery.tinyscrollbar.min.js"></script>
<script src="/javascripts/jquery/jquery.pathchange.min.js"></script>
Con pathchange cambia el tamaño de la imagen cuando se cumple una función X
Con tinyscrollbar calcula la posicion del scroll, para que se cunpla la función que desea lograr.