div que baja con el scroll

[lexus]

hola,
tengo una pagina bastante larga y un banner al lado derecho el cual deseo que cuando el usuario baje el scroll del explorador ese banner se desplace hacia abajo y cuando suba llegue al tope.
el banner lo tengo en un div
nose si me hice entender bien.
alguein sabe como hacer esto?

[IsaBelM]

esto se hace con css. usa la propiedad display:fixed junto con top y left

[lexus]

tiens algun ejemplo es qeu no se mucho de css ni javascript.
necesito algo como esto
http://cross-browser.com/x/examples/floater.php#js

[IsaBelM]

en el ejemplo que muestras se está usando javascript

[lexus]

mm cierto,
hay forma de hacerlo asi:
tengo una tabla larga con 3 columnas, y dentro de una de esas columnas tengo un div con un banner,
quiero que ese div baje o suba dependiendo del scroll del explrador..
esto lo podria hacer solamente con css?
la idea es hacer algo super sencillo pero con ese ejemplo que puse como qeu es muy complejo.

[_cronos2]

Ahí se está usando una animación en JS, si lo quieres hacer sólo con CSS, haz lo que te dijo @IsabelM, sólo que se equivocó y te dijo display en vez de position
Saludos (:

[IsaBelM]

claro, si quieres que funcione en navegadores antiguos, ie6 por ejemplo, tienes esto. si eso no te importa tienes este otro. aunque veas mucho código, únicamente necesitas las tres propiedades que te mencione anteriormente

Iniciado por _cronos2

Ahí se está usando una animación en JS, si lo quieres hacer sólo con CSS, haz lo que te dijo @IsabelM, sólo que se equivocó y te dijo display en vez de position
Saludos (:

si es que se me va la pinza por momentos

un saludo

[lexus]

muchas gracias intentare a ver como me va

[lexus]

lop he probado asi:

<div style="position:fixed;width:160px; top:auto;" align="center">

pero el banner tiene estas dimenciones
google_ad_width = 160;
google_ad_height = 600;

entonces al ser tan alto el baja con el scroll de internet explorer pero no alcanza a salir la parte inferior del banner que puedo hacer ahi?

[IsaBelM]

no conseguirás validar align="center". para centrar horizontalmente el bloque, usa la propiedad margin: 0 auto;

volviendo al asunto, esto tiene mala solución o al menos no se me ocurre como solucionarlo

[lexus]

gracias por tu ayuda,
no habra forma de qeu cuando baje el scroll y haya mostrado en pantalla todo el banner es decir cuando supere los 600 pixeles ya empiece a bajar o algo asi?
es qeu como me has colaborado ya me funcinoa lo que queria ya baja,. pero no se alcanza a ver todo el banner sale mocho.

[_cronos2]

Mmm, se puede hacer con JS: En el evento onscroll, compruebas que el scroll desde arriba sea mayor que la altura del trozo que no se ve, entonces le pones position fixed y se queda pegado.
Saludos (:

[lexus]

tiens algun ejemplo? como decia soy nuevo en javascript y css, no se mucho que digamos..
te agradeceria.

[_cronos2]

A ver:

Código Javascript:

self.onscroll = function(){
 var top = self.pageYOffset || document.body.scrollTop;
 var visiible = window.innerHeight;
 return top > banner.style.height - visible && (banner.style.position = 'fixed');
}
 

Saludos (:

[lexus]

lo puse asi, pero no me funciono:

Código Javascript:

<script language="javascript">
self.onscroll = function(){
 var top = self.pageYOffset || document.body.scrollTop;
 var visiible = window.innerHeight;
 return top > banner.style.height - visible && (banner.style.position = 'fixed');
}
 
</script>
 
<div id="banner"  style="margin:0px;"><table width="160" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="160" height="600" align="center" bgcolor="#F0F0F0"><script type="text/javascript"><!--
google_ad_client = "ca-pub-1895931916113289";
/* vertical derechoo */
google_ad_slot = "9558447790";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
  </tr>
</table>
</div>
 

[_cronos2]

Hombre, lo raro sería que te funcionase. Revisa el código y verás como hay que modificar cosas.
Edit: Y usa una consola JS!

[lexus]

pues nose como te digo no se jasvascript ni css, estoy aprendiendo apenas, lo unico raro qeu vi fue qeu visible tenia dos ii y lo corregi nada mas nose que mas pueda tener.

[_cronos2]

Una cosa es que estés aprendiendo y te ayude y otra que te dé el código. Usa la consola de errores y comprueba qué está pasando, si no ves cómo seguir vuelves aquí y preguntas.
Saludos (:

[lexus]

no me sale ningun error, estoy usando dreamweaver y me dice sin error de sintaxis,
y en internet explorer tampoco me salen errores, solo se qeuda sin moverse.

[_cronos2]

a) Si usas Dreamweaver te recomiendo que lo hagas sólo como editor de texto, no importa lo que te diga Dreamweaver, importa lo que diga el navegador.
b) Creo que antes de IE9 no hay consola de errores, y la de IE9 es una cagada; usa Firebug, o mejor Chrome.

[lexus]

ok ya estoy usando chrome y lo que hace es que se queda pegado como pasaba antes del fixed,.
pero no marca ningun error de sintaxis. igual se mocha como si hubiera solo usado style en el div.

[_cronos2]

Si ejecuto ese código en Chrome si que me marca error, usa Ctrl+Shift+J para ver la consola de errores...

[lexus]

al yo introducir este codigo en mi pagina completa.. no me marca ningun error..
si lo ejecuto solo esa parte del codigo que estamos viendo aqui, tampoco me marca error.

si oprimo las teclas ctrl shift j,
me marca esto

Unsafe JavaScript attempt to access frame with URL http://192.168.0.13/eta_final/includ...al_derecha.asp from frame with URL http://cmg1.conduit-widgets.com/pits...isHtmlCom=true. Domains, protocols and ports must match.


lo cual nose que quiere decir, me podrias colaborar diciendome donde esta el error?

[lexus]

<script type="text/javascript">
self.onscroll = function(){
var top = self.pageYOffset || document.body.scrollTop;
var visible = window.innerHeight;
return top > banner.style.height - visible && (banner.style.position = 'fixed');
}

</script>

<div id="banner" style="margin:0px;">
<table width="160" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="160" height="600" align="center" bgcolor="#F0F0F0"><script type="text/javascript"><!--
google_ad_client = "ca-pub-1895931916113289";
/* vertical derechoo */
google_ad_slot = "9558447790";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</div>

[_cronos2]

Para que te marque el error tienes que usar el scroll, ¿hasta ahí vas bien?
Como veo que vas perdido te voy a decir el primer error: ¿qué es banner?

[lexus]

banner es el elemento que yo llame a mi div
div id="banner"


le puse document.getelementbyid voy por mal camino?


<script type="text/javascript">
self.onscroll = function(){
var top = self.pageYOffset || document.body.scrollTop;
var visible = window.innerHeight;
var banner = document.getElementById('banner');
return top > banner.style.height - visible && (banner.style.position = 'fixed');
}

</script>

<div id="banner" style="margin:0px;">
<table width="160" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="160" height="600" align="center" bgcolor="#F0F0F0">
<script type="text/javascript">
<!--
google_ad_client = "ca-pub-1895931916113289";
/* vertical derechoo */
google_ad_slot = "9558447790";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</div>

[_cronos2]

Punto 1 solucionado, punto 2: banner.style.height en principio devuelve "". Piensa cómo hacer que devuelva un número.

[lexus]

nose si ponerle el height en el div asi

<div id="banner" style="margin:0px; height:600px;">

o ponerlo en el codigo asi:
banner.style.height = 600;

[_cronos2]

De las dos maneras funcionará, aunque en la segunda debes usar '600px', no 600.
Saludos (:

[lexus]

hola,
en internet explorer no me hace nada, y en firefox pasa lo mismo como si estuviera con solamente div style.. fixed..


lo hice asi...

Código Javascript:

<script type="text/javascript">
self.onscroll = function(){
 var top = self.pageYOffset || document.body.scrollTop;
 var visible = window.innerHeight;
 var banner = document.getElementById('banner');
 banner.style.height = '600px';
 return top > banner.style.height - visible && (banner.style.position = 'fixed');
}
 
</script>
<div id="banner"  style="margin:0px;">
<table width="160" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="160" height="600" align="center" bgcolor="#F0F0F0">
<script type="text/javascript">
<!--
google_ad_client = "ca-pub-1895931916113289";
/* vertical derechoo */
google_ad_slot = "9558447790";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="[URL]http://pagead2.googlesyndication.com/pagead/show_ads.js[/URL]">
</script></td>
  </tr>
</table>
</div>