estilo tienda de Apple div fija en IZQUIERDO

Question

estoy tirando de mi pelo hacia fuera sobre esto. Tengo una página web donde me gustaría tener un div posición fija de la izquierda (el traductor loro &) seguir la página tal y como se desplaza hacia abajo. http://www.cartoonizemypet.com/new/help/

Me las arreglé para seguir este tut http://jqueryfordesigners.com/fixed-floating-elements/ y obtener lo que pensé que era un efecto perfecto! Luego traté de verlo en mi teléfono ... ¡Tan pronto como amplié la pantalla, el maldito div se movió sobre el texto! :(Puede ver el efecto en un navegador normal reduciendo la ventana del navegador y desplazándose hacia la derecha.

¿Alguien sabe una forma de evitar que el loro se mueva horizontalmente? He estado buscando una solución alta y baja pero está empezando a parecer imposible.

Aquí está la CSS relevante

#content { 
    padding-top:20px; 
    padding-bottom:713px; /* Height of the footer element */ 
    width:888px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

#help-col1 { 
    left:0; 
    width:218px; 
    position:absolute; 
    height:500px; 
} 

#parrot-box { 
    position:absolute; 
    top:0; 
    margin-top: 20px; 
} 

#parrot-box.fixed { 
    position:fixed; 
    top:0; 
} 

#help-col2 { 
    width:634px; 
    float:right; 
} 

dude de revisar la fuente de la página (http://www.cartoonizemypet.com/new/help/) ver el guión y HTML. Cualquier ayuda sería muy apreciada.

Answer 1

¡Para no preocupar a todos, mi esposo descubrió una forma alternativa de hacer que esto funcione! :)

En lugar de mover el loro con la página; Voy a tener varias versiones del loro dentro de los divs de respuesta.De esta forma, cuando un usuario hace clic en una respuesta, se abre y aparece el loro al lado.

¡No como originalmente lo tenía planeado, pero creo que puedo hacer que esta nueva forma se vea aún mejor!

¡Gracias por la ayuda en cualquier caso! :)

Answer 2

Cuando el loro consigue la clase 'fijo', El loro (en el interior # ayuda-col1) tiene un valor de 'izquierda' de 0. Esto significa que siempre va a estar unido al lado izquierdo de la página ... no importa qué las dimensiones de la ventana son, y cómo se desplaza.

Lo que está pidiendo es que se comporte como un elemento fijo cuando el usuario se desplaza verticalmente, pero no horizontalmente. Hasta donde yo sé, esto no es posible. La reparación es fija ... x e y.

Sin embargo, hay algunas soluciones (like this one) que hablan sobre el uso de javascript para superar este problema. La teoría aquí es que un pequeño javascript puede escuchar cuando la página se ha desplazado horizontalmente y, si es así, empujar el loro de nuevo a su lugar en consecuencia.

Personalmente, consideraría usar css media queries para hacer una distribución móvil específica. Puede asignar CSS específico para la versión móvil del sitio, así que con suerte el usuario no necesita acercarse (o desplazarse horizontalmente) =

¡Buena suerte!

Answer 3

JS scroll event listener ha sido sugerido, pero todas las implementaciones que dependen de él son sistemáticamente laggy. Creo que tendrías mejor suerte al utilizar consultas de medios para determinar si el posicionamiento fijo es apropiado o no (por ejemplo, si la ventana/dispositivo es lo suficientemente amplio o si lo sustituyes con un comportamiento alternativo si no es así).

En realidad, podría dejar el loro en la parte superior para pantallas angostas y conservar algunos bienes inmuebles, así como abordar la incapacidad de versiones anteriores de Safari móvil para interpretar correctamente position:fixed. Por supuesto que podría poner en práctica un enfoque más refinado, pero esto debe ser un buen punto de partida - para probarlo, ejecute el siguiente script en su página (justo en la consola está muy bien):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>'); 

En primer lugar se anula la declaración original #parrot-box.fixed, y luego aplica su estilo flotante siempre que la ventana tenga al menos 982px de ancho (el ancho de su envoltura de página).