Tema: Footer fijo y desplegable
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 07/07/2014, 21:23
Rorschach
 
Fecha de Ingreso: noviembre-2002
Ubicación: tu mente
Mensajes: 17
Antigüedad: 21 años, 6 meses
Puntos: 1
Respuesta: Footer fijo y desplegable
Pos no sale, a ver si alguien me ayuda encontrando el error.

En mi html tengo:


Código HTML: 
Ver original
  1. <link rel="stylesheet" type="text/css" href="css/mbfooter.css">
  2. </head>
  3.  
  4. <body>
  5.     <div>
  6.  
  7.         <img src="images/imagen1.jpg" width="1200" height="1855" alt=""/>
  8.  
  9.     </div>
  10.  
  11.  
  12.  
  13.     <footer id="footer">
  14.     <div id="footer-top">
  15.  
  16.                 <a href="#" id="learn-more-link">Queremos saber más de ti</a>
  17.  
  18.             </div>
  19.         <div >
  20.             <img src="images/imgaen2.jpg" width="480" height="480" alt=""/>                 
  21.         </div>
  22.     </footer>
  23.  
  24.  
  25.  
  26. <script src="codigos/script2.js"></script>
  27.  
  28. </body>

Luego en mi css tengo:

Código CSS: 
Ver original
  1. footer,
  2. header,
  3. section {
  4.   display: block;
  5. }
  6. html {
  7.   font-size: 100%;
  8.   -webkit-text-size-adjust: 100%;
  9.   -ms-text-size-adjust: 100%;
  10. }
  11.  
  12. #footer {
  13.   width: 100%;
  14.   background: #da2027;
  15.   z-index: 1000;
  16.   color: #ffffff;
  17.   padding: 15px 0 100px 0;
  18.   position: fixed;
  19.   bottom: -540px;
  20.   min-height: 472px;
  21.  
  22.   -webkit-transform: translate3d(0,0,0);
  23.   -moz-transform: translate3d(0,0,0);
  24.   -ms-transform: translate3d(0,0,0);
  25.   -o-transform: translate3d(0,0,0);
  26.   transform: translate3d(0,0,0);
  27.  
  28.   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  29.   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  30.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  31. }
  32.  
  33. .relative-footer {
  34.   position: relative !important;
  35.   bottom: 0 !important;
  36.   margin-top: -60px;
  37. }

y en java:

Código Javascript: 
Ver original
  1. var footerCatch = 0;
  2. var footerCaught = false;
  3. var footerActive = false;
  4.  
  5.         $('#learn-more-link').click(function(){
  6.  
  7.             if(!footerCaught && !footerActive){
  8.                 footerActive = true;
  9.                 activateFooter();
  10.             } else if(footerActive){
  11.                 footerActive = false;
  12.                 deactivateFooter();
  13.             } else if (footerCaught){
  14.  
  15.             }
  16.  
  17.             return false;
  18.         });
  19.  
  20.         // Handle Header and Footer on Scroll
  21.  
  22.         $(window).scroll(function(evnt){
  23.                                     
  24.             var offset = $(window).scrollTop();
  25.             
  26.             if(footerCatch == 0){
  27.                 footerCatch = $('body').height() - $(window).height();
  28.             }
  29.  
  30.             if(offset >= navCatch){
  31.                 $('#header').not(".fixed-navigation.header-shadow").addClass('fixed-navigation header-shadow');
  32.             }else{
  33.                 $('#header.fixed-navigation.header-shadow').removeClass('fixed-navigation header-shadow');
  34.             }
  35.  
  36.             if($(window).height() < $('body').height() && !shortPage){
  37.  
  38.                 if(offset >= (footerCatch - 1) && !footerActive){
  39.                     !footerCaught && catchFooter();
  40.                 } else {
  41.                     footerCaught && releaseFooter();
  42.                 }
  43.             }
  44.  
  45.             // Parallax Scrolling for Hero Image
  46.             requestAnimationFrame(function(){
  47.                 slideItem();
  48.             });
  49.  
  50.         });
  51.  
  52.     
  53. function activateFooter(){
  54.     footerActive = true;
  55.     var footerHeight = $('#footer').height() + 62 + 'px';
  56.     $(document).bodyHeight();
  57.     $('body').css('paddingBottom', footerHeight);
  58.     $('#footer').animate({
  59.         bottom: 0
  60.     }, 200, function(){
  61.  
  62.     });
  63. }
  64.  
  65. function deactivateFooter(){
  66.     footerActive = false;
  67.     var footerHeight = -($('#footer').height() + 62) + 'px';
  68.     $(document).bodyHeight();
  69.     $('body').css('paddingBottom', '0px');
  70.     $('#footer').animate({
  71.         bottom: footerHeight
  72.     }, 200, function(){
  73.  
  74.     });
  75. }
  76.  
  77. function catchFooter(){
  78.     footerCaught = true;
  79.     $('#footer').addClass('relative-footer');
  80. }
  81.  
  82. function releaseFooter(){
  83.     footerCaught = false;
  84.     $('#footer').removeClass('relative-footer');
  85. }


Muchas gracias por adelantado!