Footer fijo y desplegable

Rorschach · #1 (**permalink**) 05/07/2014, 12:17

¿Qué tal foreros?
Dejé el diseño web hace ya bastantes años y ahora me estan pidiendo un favor especial, pero estoy super desencanchado.

Alguno podría decirme como puedo hacer un footer que tenga fijo el título y el resto se despliege al llegar al final de la página como el que esta en esta página? (donde dice learn more):

http://www.johnmaxwell.com/

No se si sea HTML5 o CCS

Como siempre, Muchas gracias por su ayuda

memoadian · #2 (**permalink**) 05/07/2014, 13:28

Es un efecto interesante.

El footer cuando todavía no llegas al final de la página esta fixed, esto quiere decir que está pegado y fijo al pie de página y tiene un bottom:-600px de este modo se oculta. Luego calculan el scroll de la página cuando esta cerca del final le cambian los valores a position y bottom dejándolos como cualquier otro footer y ocurre el efecto.

Rorschach · #3 (**permalink**) 05/07/2014, 14:44

No calculan el scroll, simplemente, cuando el body llega al final cambia de fixed: position: absolute, bottom= -600 a position: relative, bottom= 0 pero no se como hacerlo

pzin · #4 (**permalink**) 05/07/2014, 14:46

Cita:

Iniciado por Rorschach

No calculan el scroll, simplemente, cuando el body llega al final cambia [...]

O sea, ¿qué pedo?

memoadian te ha explicado perfectamente cómo hacerlo, y, seguramente, es como lo hacen en esa página.

memoadian · #5 (**permalink**) 05/07/2014, 14:55

¿Y como sabes cuando el body llega al final?

pues con el scroll

Código Javascript:

Ver original$(window).scroll(function(evnt){
                                    
            var offset = $(window).scrollTop();
            
            if(footerCatch == 0){
                footerCatch = $('body').height() - $(window).height();
            }
 
            if(offset >= navCatch){
                $('#header').not(".fixed-navigation.header-shadow").addClass('fixed-navigation header-shadow');
            }else{
                $('#header.fixed-navigation.header-shadow').removeClass('fixed-navigation header-shadow');
            }
 
            if($(window).height() < $('body').height() && !shortPage){
 
                if(offset >= (footerCatch - 1) && !footerActive){
                    !footerCaught && catchFooter();
                } else {
                    footerCaught && releaseFooter();
                }
            }
 
            // Parallax Scrolling for Hero Image
            requestAnimationFrame(function(){
                slideItem();
            });
 
        });

esta es la función que usan.

Rorschach · #6 (**permalink**) 07/07/2014, 10:45

memoadian, muchas gracias por tu ayuda. Pzin, cómprate una vida, si no ayudas, no critiques.

pzin · #7 (**permalink**) 07/07/2014, 14:19

Cita:

Iniciado por Rorschach

memoadian, muchas gracias por tu ayuda. Pzin, cómprate una vida, si no ayudas, no critiques.

Ahora aviso a ver si meten esa norma en las políticas del foro.

No era una crítica, era una observación sobre tu incoherencia. Pero bueno, ya tienes el código mascadito ahí, que supongo que es lo importante después de todo.

Rorschach · #8 (**permalink**) 07/07/2014, 14:37

¡Ay! pobre nerdsito, seguro lo único que tienes en la vida es tu posición en este foro. Te recuerdo que el foro 22 donde llorabas cerró hace 10 años, ya puedes superarlo, madurar y dejar de descargar tu frustración en linea. Te recomiendo salir a tomar un poco de sol.

Rorschach · #9 (**permalink**) 07/07/2014, 21:23

Pos no sale, a ver si alguien me ayuda encontrando el error.

En mi html tengo:

Código HTML:

Ver original<link rel="stylesheet" type="text/css" href="css/mbfooter.css">
</head>
 
<body>
    <div>
 
        <img src="images/imagen1.jpg" width="1200" height="1855" alt=""/>
 
    </div>
 
 
 
    <footer id="footer">
    <div id="footer-top">
 
                <a href="#" id="learn-more-link">Queremos saber más de ti</a>
 
            </div>
        <div >
            <img src="images/imgaen2.jpg" width="480" height="480" alt=""/>                 
        </div>
    </footer>
 
 
 
<script src="codigos/script2.js"></script>
 
</body>

Luego en mi css tengo:

Código CSS:

Ver originalfooter,
header,
section {
  display: block;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
 
#footer {
  width: 100%;
  background: #da2027;
  z-index: 1000;
  color: #ffffff;
  padding: 15px 0 100px 0;
  position: fixed;
  bottom: -540px;
  min-height: 472px;
 
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
 
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
 
.relative-footer {
  position: relative !important;
  bottom: 0 !important;
  margin-top: -60px;
}

y en java:

Código Javascript:

Ver originalvar footerCatch = 0;
var footerCaught = false;
var footerActive = false;
 
        $('#learn-more-link').click(function(){
 
            if(!footerCaught && !footerActive){
                footerActive = true;
                activateFooter();
            } else if(footerActive){
                footerActive = false;
                deactivateFooter();
            } else if (footerCaught){
 
            }
 
            return false;
        });
 
        // Handle Header and Footer on Scroll
 
        $(window).scroll(function(evnt){
                                    
            var offset = $(window).scrollTop();
            
            if(footerCatch == 0){
                footerCatch = $('body').height() - $(window).height();
            }
 
            if(offset >= navCatch){
                $('#header').not(".fixed-navigation.header-shadow").addClass('fixed-navigation header-shadow');
            }else{
                $('#header.fixed-navigation.header-shadow').removeClass('fixed-navigation header-shadow');
            }
 
            if($(window).height() < $('body').height() && !shortPage){
 
                if(offset >= (footerCatch - 1) && !footerActive){
                    !footerCaught && catchFooter();
                } else {
                    footerCaught && releaseFooter();
                }
            }
 
            // Parallax Scrolling for Hero Image
            requestAnimationFrame(function(){
                slideItem();
            });
 
        });
 
    
function activateFooter(){
    footerActive = true;
    var footerHeight = $('#footer').height() + 62 + 'px';
    $(document).bodyHeight();
    $('body').css('paddingBottom', footerHeight);
    $('#footer').animate({
        bottom: 0
    }, 200, function(){
 
    });
}
 
function deactivateFooter(){
    footerActive = false;
    var footerHeight = -($('#footer').height() + 62) + 'px';
    $(document).bodyHeight();
    $('body').css('paddingBottom', '0px');
    $('#footer').animate({
        bottom: footerHeight
    }, 200, function(){
 
    });
}
 
function catchFooter(){
    footerCaught = true;
    $('#footer').addClass('relative-footer');
}
 
function releaseFooter(){
    footerCaught = false;
    $('#footer').removeClass('relative-footer');
}

Muchas gracias por adelantado!

pzin · #10 (**permalink**) 09/07/2014, 02:58

Cita:

Iniciado por Rorschach

Pos no sale, a ver si alguien me ayuda encontrando el error.

Parece que hayas copiado y pegado el código sin mirar mucho qué hace.

Cita:

Iniciado por Rorschach

[...] cuando el body llega al final cambia de fixed: position: absolute, bottom= -600 a position: relative, bottom= 0 pero no se como hacerlo

Pues si sólo quieres hacer eso, realmente sólo debes de calcular el scroll y compararlo con la altura de body. Si usas jQuery como parece que haces, pues sería usar scrollTop() y height() para realizar la comparación. Luego si se cumple la condición o no, puedes añadir o quitar una clase del pie de página con toggleClass() y ya te encargarís de las propiedades CSS donde tengas tus estilos.

ottojeanpierre · #11 (**permalink**) 12/07/2014, 15:42

Me parece realmente interesante ese efecto del nav, si este esta hecho solo en css, me podrian alguna idea de como plantear ese efecto? No entiendo muy bien.... si al menu le pasas el mouse encima sobre este sale el border top , pero lo que no entiendo es como se mantiene el border top en el menu li, mientras se hace el hover sobre el submenu.

Alguna ayuda.... Gracias.

pzin · #12 (**permalink**) 12/07/2014, 17:28

Cita:

Iniciado por ottojeanpierre

como se mantiene el border top en el menu li, mientras se hace el hover sobre el submenu.

Pues porque se sigue dentro de ese li. Un submenú suele ser otra lista ul dentro de un li.

Por otro lado, es mejor que abras un tema nuevo si la duda difiere del tema en el que estás.