Tengo un div en el lado izquierdo que incluye el horario comercial y el clima. Me gustaría que div se desplazara hacia abajo y hacia arriba según la forma en que el usuario se desplaza. Entonces seguiría y movería arriba y abajo con la página. ¿Cómo voy a intentar esto? Esta es mi página web judystropicalgarden.com¿Cómo haces que div siga mientras te desplazas?
Gracias
Puede utilizar la propiedad de posición fixed CSS para lograr esto. Hay un tutorial básico en este here.
EDITAR: Sin embargo, este enfoque NO es compatible con las versiones IE < IE7, y solo en IE7 si está en modo estándar. Esto se analiza con un poco más de detalle here.
También hay un truco, explicó here, que muestra cómo lograr el posicionamiento fijo en IE6 sin afectar el posicionamiento absoluto. ¿Para qué versión de IE está apuntando su sitio web?
wow ok gracias por todas las respuestas chicos ... ¿el método "fijo" también funciona en IE? – user1165861
Consulte mi edición anterior para conocer los problemas de cumplimiento. – SuperTron
cómo funcionará para absoluto – Si8
Utilizando el estilo de CSS, puede definir cómo se coloca algo. Si define el elemento como fijo, siempre permanecerá en la misma posición en la pantalla en todo momento.
div
{
position:fixed;
top:20px;
}
Puede utilizar la propiedad CSS fijo, o si necesita algo más afinado, entonces necesita utilizar javascript y realizar un seguimiento de la propiedad scrollTop que define donde la ubicación barra de desplazamiento del agente de usuario es (siendo 0 en el subir ... y x en la parte inferior)
.Fixed
{
position: fixed;
top: 20px;
}
o con jQuery:
$('#ParentContainer').scroll(function() {
$('#FixedDiv').css('top', $(this).scrollTop());
});
Hola, buena solución. Muy elegante. Pero lo que funcionó para mí fue establecer la versión de JavaScript en la parte inferior, es decir, establecer el valor de desplazamiento en el valor inferior del div fijo. –
¿Qué sucede si el propósito de la demostración es 'absoluto' y no está arreglado? – Si8
@ Si8 Hacer una posición absoluta no garantiza que el elemento permanezca visible en la ventana gráfica en todo momento, ya que la pregunta del OP es obligatoria. –
una mejor respuesta jQuery sería:
$('#ParentContainer').scroll(function() {
$('#FixedDiv').animate({top:$(this).scrollTop()});
});
También puede agregar un número después de scrollTop, es decir .scrollTop() + 5 para darle brillo.
Una buena sugerencia también sería limitar la duración a 100 y pasar de la oscilación predeterminada a la aceleración lineal.
$('#ParentContainer').scroll(function() {
$('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})
posición: fijo; propiedad debería hacer el trabajo, lo usé en mi sitio web y funcionó bien. http://www.w3schools.com/css/css_positioning.asp
posible duplicado de [Cómo hacer div siga desplazándose sin problemas con jQuery?] (Http://stackoverflow.com/questions/2177983/how-to-make-div-follow-scrolling-smoothly-with-jquery) – j08691
Por 'seguir' ¿quiere decir que debería, literalmente, * seguir el mouse *? ¿O que simplemente debería permanecer visible en la pantalla, independientemente de desplazarse? –