Comunidad de diseño web y desarrollo en internet online

Imagen se mantenga al top cuando se hace scroll

Citar            
MensajeEscrito el 28 Sep 2011 09:19 pm
Junto con saludarles, tengo la siguiente consulta, en el lado derecho de mi sitio web necesito que el ultimo banner o imagen se mantenga en el top de la pagina según se baje con el scroll, ver la pagina de :

http://www.wayerless.com/

Ahi la ultima imagen se mantiene en la posicion superior de la pantalla mientras se baja con el scroll .

Estuve revisando la pagina en cuestion y utiliza jcarusel pero no se mucho jquery .

Se antemano gracias.....

Por marisela_cornejo

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Sep 2011 07:45 am
No se si te sirva pero lo que quieres hacer creo que se llama "anchor bar" que la traducción literal es una barra anclada o imagen anclada. Y se hace con css, con position: absolute.

xD

Por Evanfallen

31 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Sep 2011 12:29 pm
ok, gracias, veré como lo implemento ...

Por marisela_cornejo

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Oct 2011 09:06 pm
Encontré la solución pero tengo problemas con IE, ya que utilizo la propiedad position .. :-(
En Chrome y FireFox funciona.

El código es el siguiente:

<style type="text/css">

#sidebar { width: 200px; float: right; }

</style>

<script type="text/javascript">

$(function() {
var offset = $("#sidebar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").css({'position':'fixed','top':20 +'px' });
}

if($(window).scrollTop()<= offset.top){
$("#sidebar").css({'position':'relative','top':'0'+'px'});
}

});
});

</script>

y el sidebar o la imagen que quiere que se mantenga fija cuando hago scroll :

<div id="sidebar" >
<a href="http://www.gamerzone.cl/" target="_blank">
<img src="L_GamerZone_BannerL.jpg" width="200" height="176" vspace="5" border="0" />
</a>
</div>


Cuando realizo el scroll la imagen se sale de la linea, se va para la derecha de la pantalla, no toma el fixed y el relative de la propiedad position .......

Por marisela_cornejo

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 04 Oct 2011 12:18 pm
En CSS no uses float. Posiciona el elemento que te interesa con position: fixed y dale un top y right. Esa será la posición inicial.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 04 Oct 2011 12:36 pm
ok, probaré tus indicaciones y te cuento

Salud2

Por marisela_cornejo

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 04 Oct 2011 06:19 pm
Si funciono pero en IE6 no hace nada :-( . El código quedo así ...
#sidebar { width: 200px; position:fixed; top:250px; right:0px;}

Pero el IE6 ni siquiera muestra el div sidebar ....

como salvo este inconveniente???

Por marisela_cornejo

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 04 Oct 2011 07:54 pm
No te preocupes, al IE6 no lo usa nadie. El problema es que IE6 no reconoce "position: fixed" como atributo válido.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 04 Oct 2011 08:57 pm
Eso había escuchado así que no me calentaré mas mi cabecita, muchas gracias por la ayuda..

Por marisela_cornejo

4 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.