¿Cómo hacer que el elemento flotante fijo se detenga en #footer?

A continuación se muestra el código que estoy usando para corregir una barra lateral a medida que el usuario se desplaza. A partir de ahora, se superpone con mi pie de página. ¿Cómo puedo hacer que se detenga en cierto punto o cuando llegue al pie de página?¿Cómo hacer que el elemento flotante fijo se detenga en #footer?

<script type="text/javascript"> 
    $(document).ready(function() { 
    if ($('.pageheaderwrap').length) { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 362) { 
       $(".sidebar-left").css({ 
        "position": "fixed", 
        "top": 0 
       }); 
      } else { 
       $(".sidebar-left").css({ 
        "position": "absolute", 
        "top": "255px" 
       }); 
      } 
     }); 
    } else { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 230) { 
       $(".sidebar-left").css({ 
        "position": "fixed", 
        "top": 0 
       }); 
      } else { 
       $(".sidebar-left").css({ 
        "position": "absolute", 
        "top": "125px" 
       }); 
      } 
     }); 
    } 
}); 
</script>

Fuente

2011-07-15 Mike Stevenson

@Cybernate: Estaba a punto para arreglar el sangrado yo mismo :-) – GregL

Puede calcular la distancia entre los dos elementos (pie de página y barra lateral), y cuando esa distancia <= 0 puede dejar de mover la barra lateral hacia abajo. Echa un vistazo a esta publicación: http://stackoverflow.com/questions/225563/get-relative-position-between-2-dom-elements-using-javascript. –

Por qué no eliminar todos los javascript y lo hacen con CSS:

.sidebar-left { 
    position: fixed; 
    bottom: 20px; /* height of your footer */ 
}

Fuente

2011-07-15 02:25:43 Adam

Imagino que lo quiere pegado al fondo hasta que choca con el pie de página, y luego se pega a la parte superior del pie de página. – AlienWebguy

Ahhh, en ese caso, tiene que establecer la parte inferior: altura del pie de página cuando llega al pie de página – Adam

Sí, un ejemplo perfecto de lo que estoy tratando de lograr es el mapa de la derecha en Yelp: http: // www. yelp.com/search?find_desc=food&ns=1&find_loc=Santa+Rosa%2C+CA –

Aquí es algo que podría funcionar para usted:

http://jsfiddle.net/y3qV5/7/

El plugin jQuery que está haciendo esto establece elementos que fijan cualquier margen desde la parte superior de la página. Con un límite opcional, destrabará el elemento y hará que continúe desplazándose hacia arriba en la página, manteniéndolo alejado de su pie de página. Debería establecer el límite en la parte superior de su pie de página, más la altura de lo que sea su elemento objetivo.

Aquí es el uso de código para este escenario (el violín arriba):

$(document).ready(function() { 
    $('#cart').scrollToFixed({ 
     marginTop: 10, 
     limit: $('#footer').offset().top 
    }); 
});

Aquí está el enlace al plugin y su fuente:

https://github.com/bigspotteddog/ScrollToFixed

Fuente

2011-09-01 03:46:23 bigspotteddog

¿Cómo hacer que el elemento flotante fijo se detenga en #footer?

Respuesta

Cuestiones relacionadas