hacer que toda la página se desplace debajo de cierta altura en la parte superior sin ninguna barra de desplazamiento

html:

content goes here

css:

 .div_fixed{ position:fixed; height:40px; } .other_content{ height:200px; } 

El div_fixed permanecerá fijo en la posición superior de la página.

Pero a medida que la página se desplaza hacia arriba, el contenido de div other_content se desvanecerá justo en el borde inferior del div div_fixed .

En el caso de desplazarse hacia abajo, el contenido invisible de other_content comenzará a ser visible desde el borde inferior de div_fixed

¿Cómo lograr eso?

EDITAR: no debe aparecer una barra de desplazamiento para ningún div

Usar overflow: hidden para deshacerse de las barras de desplazamiento

Es esto lo que estás buscando? http://jsfiddle.net/BCRPa/

Tomé su HTML / CSS y agregué un bit en jsFiddle . Creo que para lograr el efecto que busca, solo necesita hacer que su contenido sea lo suficientemente alto como para desplazarse. A 200px de alto y una línea de texto, nada va a desplazarse.

Así que hice su other_content div más alto, y luego agregué un top: 0 a su selector .div_fixed , para mantenerlo pegado en la parte superior de la pantalla, y un margin-top: 40px al .other_content div para que comience debajo del div flotante.

Si desea que sea una cosa tipo navbar, puede, por supuesto, agregar un width: 100% a .div_fixed .

Todo esto debería transferirse a un contenedor div (con position: relative ) con bastante facilidad también si lo desea, aunque es posible que tenga que volver a colocar el div fijo.