Como dejar un Banner Fijo

Tael Yang

Tael Yang

Lanero Reconocido
8 Nov 2004
503
Saludos LANEROS

Con lo que necesito que me colaboren es lo siguiente:

Necesito poner en una pagina un Banner superior que se quede fijo y que cuando hagan scroll hacia habajo el baner se quede visible.
 
Ciao

si quieres que quede fijado al browser, usa la propiedad de css position:fixed, pero ojo que Iexplorer 6 no la interpreta correctamente
 
Discumplen que me meta aqui, para hacer una preguntica que depronto le sirve al lanero Tael Yang
Federico Piccol dijo:
Ciao

si quieres que quede fijado al browser, usa la propiedad de css position:fixed, pero ojo que Iexplorer 6 no la interpreta correctamente
Haz clic para expandir...

Disculpe Federico, me podria dar un ejempo, le agradezco...

Digamos que tengo la URL de la imagen o el .swf ( http://1234.swf)
y quiero ponerlo aqui...
Sin%2Bt%25C3%25ADtulo.jpg


...como iria en CSS? .. le agradezco de nuevo la molestia :p
 
Hola

Para que el banner vaya pegado a la esquina superior izquierda del browser (osea a 0 pixel de arriba y 0 pixel de la izquierda):

En el html se creas un div en el que se coloca el banner
En el archivo css se crea una clase del mismo nombre del div, con las instrucciones:

position:fixed; top: 0px; left: 0px;

y ya está
 
  • Me gusta
Reacciones: 2 personas
Hola

Espero les valla bien :) apesar de que ya el compañero federico dio la solucion, me decidi a crear un videito... colaborando con la practica de dicha solucion... es algo bastante basico, solo busco que el que se este iniciando en el CSS entienda de una forma mas facil lo que el compañero federico menciono.

Video:


Archivos:
http://abreo.co/css/archivos_bannerarriba.zip

Cuando puedan pasen por el foro de CSS, seria como el mejor espacio para este tipo de dudas...

pd: para conocer mas de zen coding ver este video http://vodpod.com/watch/2552548-zen-coding

Saludos colegas!
 
Última edición por un moderador:
Mas de CSS

Mejor no se puede, exelente, muchas gracias.

ahora tengo otra duda, supongamos que lo que quiero dejar fijo esta en la mitad de la pantalla y que cuando se haga scroll hacia abajo y una vez dicho contenido llegue arriba ahi se quede fijo.

me hago entender¿?


MmM.jpg

mmmur.jpg
 
Tael Yang dijo:
... lo que quiero dejar fijo esta en la mitad de la pantalla y que cuando se haga scroll hacia abajo y una vez dicho contenido llegue arriba ahi se quede fijo...
Haz clic para expandir...
Ciao

si no he entendido mal, el contenido no está fijo, se mueve, no creo que con puro css se pueda hacer.

Otra cosa sería que, una vez finalizado el scroll se resitúe a una altura determinada, pero en ese caso deberías ayudarte de un script y otra cosa sería conseguir que funcione en según que versiones de Iexplorer
 
Tael Yang dijo:
Mejor no se puede, exelente, muchas gracias.

ahora tengo otra duda, supongamos que lo que quiero dejar fijo esta en la mitad de la pantalla y que cuando se haga scroll hacia abajo y una vez dicho contenido llegue arriba ahi se quede fijo.

me hago entender¿?


MmM.jpg

mmmur.jpg
Haz clic para expandir...


Hola compa, ya con CSS puro no puedes hacer eso ya que necesitas saber la posicion del scroll y un metodo de conseguirlo es por medio de un plugin de Jquery que consegui...

Si te entendi bien, lo que necesitas hacer es esto? :

http://abreo.co/css/bannfijo.html

si tu respuesta es SI, entonces debes bajarte la libreria que es la siguiente:

http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js

tambien debes poner jquery:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

y dentro de head lo siguiente:

Código: 
<script type="text/javascript">
$(document).ready(function() {
$.waypoints.settings.scrollThrottle = 30;

$('.contenedorpage').waypoint(function(event, direction) {}, {
offset: '-100%'
}).find('.menu').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
</script>

alli estan las clases segun el CSS que hice de rapides para eso, pero puedes cambiarlo segun tu web...

Basicamente el div (.menu) se quedara fijo cuando toque el borde de arriba del navegador, por medio de jquery, este le pondra el estilo (.sticky) que es el que contiene la declaracion position: fixed;

segun mi ejemplo el css seria:

Código: 
.sticky .menu {
    position: fixed;
    top: 0;
    width: 920px;
}

Me gustaria explicarte de una mejor forma, pero la verdad mis conocimientos de Jquery son casi nulos, cosa que me a puesto a pensar, es hora de dedicarle el tiempo para aprenderlo =)

Para ver mas ejemplos del potencial del plugin, visita http://imakewebthings.github.com/jquery-waypoints

De todos modos puedes usar el demo online que hice, esta mas sencillo para entenderlo mejor... Saludos

pd: seria chevere unir este foro con el de CSS... no se si algun moderador le suene...
pd2: federico, lei tu mp pero no pude responderte, tienes los mensajes privados bloqueados...
 
viejo eL-pEkE, gracias , mañana a primera hora voy a darle candela al material que posteaste a ver que, y fresco por lo de jquery que a eso si le estoy dando duro hace un ratico y entiendo bastante ya.

Gracias.
 
Perfecto!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 

Los últimos mensajes

Los últimos temas

Arriba Pie
Atrás