Volver al Programación / Codificación foro

Límite de desplazamiento del elemento fijo

  • mista-two-k
  • Beginner
  • Beginner
  • No Avatar
  • Registrado: Oct 15, 2007
  • Mensajes: 57
  • Status: Offline

Nota Noviembre 15th, 2011, 6:48 am

Bueno,

Tengo un elemento fijo que siempre se queda en una posición fija incluso al desplazarse arriba/abajo la página. Sin embargo, mi sitio Web tiene un pie bastante grande y quiero evitar ese elemento para desplazarse sobre el pie de página. ¿Cómo puedo hacer que para que el elemento fijo impide que se fija en una posición específica?

Espero que chicos entiendes lo que quiero decir.

Gracias:)
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Noviembre 15th, 2011, 6:48 am

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Noviembre 15th, 2011, 4:01 pm

Tendrá que hacer algo parecido a lo que hace Ozzu. Notará que a veces el menú de la derecha es un elemento fijo si la página es suficientemente larga, pero tan pronto como el pie de página aproxima lo vuelve a no ser fijo para no desplazarse sobre el pie de página. La única manera de lograrlo es mediante Javascript. En el caso de Ozzu utilizamos jQuery para hacerlo más fácil. Básicamente usted sólo necesita costumbre escribir código para detectar cuando el elemento fijo debe ser fijo y no debe fijarse.

Hay probablemente numerosas formas de hacerlo, pero cómo lo hacemos actualmente son como sigue:

JAVASCRIPT Código: [ Select ]
   //Enables the dynamic static menu
   var triggerY, triggerY2;
   IntializeScrollTriggers();
 
   $(window).resize(function() {
      IntializeScrollTriggers();
   });
 
   $(window).scroll(function (event) {
      scrollCompute();
   });
   
   function scrollCompute()
   {
      if($('#container').height() > $('#sidebar').height()) {
         if(($('#sidebar').height() + 10)> $(this).height()) {
            triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
            var scrollY = $(this).scrollTop() + $(this).height();
            if (scrollY >= triggerY) {
               $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10);
               if(scrollY >= triggerY2) {
                  $('#sidebar').css('bottom', scrollY - triggerY2);
               }
               else {
                  $('#sidebar').css('bottom', '0px');
               }
            } else {
               $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '');
            }
         }
         else {
            var scrollY = $(this).scrollTop();
            if (scrollY >= triggerY) {
               $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10).css('top', '10px');
            }
            else {
               $('#sidebar').removeClass('fixed').css('left', '').css('top', '');
            }
         }
      }  
   }
   
   function IntializeScrollTriggers() {
      $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '').css('top', '');
     
      if(($('#sidebar').height() + 10) > $(this).height()) {
         triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
         triggerY = $('#sidebar').offset().top + $('#sidebar').height() - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
      }
      else {
         triggerY = $('#sidebar').offset().top - 10 - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
      }
     
      scrollCompute();
   }
  1.    //Enables the dynamic static menu
  2.    var triggerY, triggerY2;
  3.    IntializeScrollTriggers();
  4.  
  5.    $(window).resize(function() {
  6.       IntializeScrollTriggers();
  7.    });
  8.  
  9.    $(window).scroll(function (event) {
  10.       scrollCompute();
  11.    });
  12.    
  13.    function scrollCompute()
  14.    {
  15.       if($('#container').height() > $('#sidebar').height()) {
  16.          if(($('#sidebar').height() + 10)> $(this).height()) {
  17.             triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
  18.             var scrollY = $(this).scrollTop() + $(this).height();
  19.             if (scrollY >= triggerY) {
  20.                $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10);
  21.                if(scrollY >= triggerY2) {
  22.                   $('#sidebar').css('bottom', scrollY - triggerY2);
  23.                }
  24.                else {
  25.                   $('#sidebar').css('bottom', '0px');
  26.                }
  27.             } else {
  28.                $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '');
  29.             }
  30.          }
  31.          else {
  32.             var scrollY = $(this).scrollTop();
  33.             if (scrollY >= triggerY) {
  34.                $('#sidebar').addClass('fixed').css('left', parseFloat($('#content').width()) + 10).css('top', '10px');
  35.             }
  36.             else {
  37.                $('#sidebar').removeClass('fixed').css('left', '').css('top', '');
  38.             }
  39.          }
  40.       }  
  41.    }
  42.    
  43.    function IntializeScrollTriggers() {
  44.       $('#sidebar').removeClass('fixed').css('left', '').css('bottom', '').css('top', '');
  45.      
  46.       if(($('#sidebar').height() + 10) > $(this).height()) {
  47.          triggerY2 = $('#container').offset().top + $('#container').height() - parseFloat($('#container').css('marginTop').replace(/auto/, 0));
  48.          triggerY = $('#sidebar').offset().top + $('#sidebar').height() - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  49.       }
  50.       else {
  51.          triggerY = $('#sidebar').offset().top - 10 - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  52.       }
  53.      
  54.       scrollCompute();
  55.    }


Que podría darle ideas sobre cómo hacerlo, usted será probablemente tienen costumbre escribir su propia solución pero con lo anterior que puede darle una idea de cómo empezar. Recuerde que esto es dependiente de la biblioteca jQuery.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 278 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC