Ocultar div al hacer scroll

[edie8]

Buenas tengo un problema con un scroll que lo que hace es que sea siempre visible un menu, pero la imagen de dicho menu esta en el body y al hacer el scroll, logico, la imagen no baja y se queda el menu sin la imagen, lo que quiero hacer esque al hacer el scroll el menu de antes dde oculte y solo se quede el que siempre esta visible aunque hagas scroll este es mi codigo:
el menu:

Código PHP:

 <div class="arriba"><div id="mensaje_cabe">Tu Red Social &nbsp;  
<?php 
$valor=$count[0]; 
if(!empty($_SESSION['logueado_nombre'])) 
  
{ 
 
?> 
           <center><a href="">Inicio</a> | <a href="privados/index.php">Mensajes<span class="numero"> <?php if($valor>0){echo "$count[0]";}else{}?></span></a> | <a href="gente.php">Gente</a> | <a href="fotos.php">Fotos</a>| <a href="#">Perfil</a></center> 
                        <div id="opcionesDeCuenta"><span onClick="mostrarMenu(this)"><img src="Img/flecha.jpg" width="39" height="33"></span> 
<ul> 
<ul id="aDeslizar" style="display:none"> 
<li><a href="#">Cuenta</a></li> 
<li><a href="#">Privacidad</a></li> 
<li><a href="logout.php">Salir</a></li> 
</ul> 
</ul> 
</div> 
</div> 
</div>  

este es el javascript

Código PHP:

  addEvent(window,'load',inicializarEventos,false); 
 
function inicializarEventos() 
{ 
  addEvent(window,'scroll',cambioScroll,false); 
} 
 
function cambioScroll(e) 
{ 
  var mensaje = document.getElementById("mensaje_cabe"); 
  mensaje.style.top = document.body.scrollTop; 
} 
 
function addEvent(elemento,nomevento,funcion,captura) 
{ 
  if (elemento.attachEvent) 
  { 
    elemento.attachEvent('on'+nomevento,funcion); 
    return true; 
  } 
  else   
    if (elemento.addEventListener) 
    { 
      elemento.addEventListener(nomevento,funcion,captura); 
      return true; 
    } 
    else 
      return false; 
}  
   

y el estilo:

Código PHP:

  body {     
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    /*margin: 2px;*/ 
    background-image:url(../Img/fondo.gif);  
    background-repeat:repeat-x;  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px; 
    color:#666666; 
} 
#mensaje_cabe 
{ 
position:absolute; 
left: 0px;  
  width: 1024px;  
  height: 50px; 
  border:#0000FF; 
    background-image:url(../Img/fondo.gif);  
    background-repeat:repeat-x;  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px; 
    color:#666666; 
  }  
   

el problema asi la imagen del segundo id del div no se queda igual que la otra no yega al final y se queda mal. como puedo areglar esto espero que me puedan ayudar gracias, un saludo.

[hmbp22]

no entiendo muy bien tu pregunta, pero por que no utilizar "position: fixed" (css) para el menu que siempre se ve?
y puedes ocultar el div en una function ejecutada por el evento scroll con imagen.style.visibility = "hidden";
o
imagen.style.display = "none";
Espero que eso ayude

[edie8]

Si pongo fixed en la position se me ve en la mitad de la pantalla y el menu esta arriba se queda como una cabecera de menu. y lo de imagen.style.visibility no me queda bastante claro como tengo que poner eso?? lo que quiero q me oculte no es el menu que siempre esta visible sino la imagen contenida en el body que el estylo lo deje arriba. gracias.