Registrarme Entrar
Email
Contraseña
Nombre
Email

Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/treeweb/www_ovillo/class/Database.class.php on line 20
25
Aug
2011
por Invitado
2 respuestas

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/treeweb/www_ovillo/class/Textile.class.php on line 1526

Buenos días. Os comento un poco el problema que tengo:

Tengo un elemento con posición fija en el sidebar, que sube y baja en
función del scroll: ese es el efecto que quiero conseguir. La cosa es que al
tener un div-contenedor con margin 0 auto, el elemento fijo se queda donde
está y no se adapta. Lo suyo sería que se adaptara a ese div contenedor.
¿Tenéis idea de cómo puedo conseguir lo que quiero? No me gustaría tener
eliminar el centrado del contendor…

Mil gracias,
Marina.


Aquí un ejemplo de lo que quiero:

http://ajax-zoom.com/


Ahora el problema que me estoy encontrando es que si se reduce el tamaño de
la ventana y se hace scroll, resulta que hace caso omiso a mantener un
margin-bottom; a veces el menú ni se consigue ver… ¿Alguien sabe cómo está
hecho este menú de domestika? Es justo lo que busco…. Va muy fluido. He
visto que pasa de posición absoluta a posición fixed y cuando llega al final
del menú se vuelve de nuevo absoluto…

http://www.domestika.org/empleo/oferta

25
Aug
2011
por Invitado
1 respuestas

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/treeweb/www_ovillo/class/Textile.class.php on line 1526

El objetivo consiste en tener un menú que se mantenga visible en la parte superior cuando se empiece a perder de vista haciendo scroll.

La clave es detectar con javascript cuándo se está empezando a perder de vista para asignarle el estilo position:fixed; top:0;

Este código se puede ver en funcionamiento en http://www.treeweb.es/ShareCode/50568d8d556b885a87e11edad72e8b32

<div class="cabecera">
    Titulo
</div>

<div class="marco">
   
<div class="menu-borde">
       
<div id="menu" class="menu">
            uno
<br>
            dos
<br>
            tres
<br>
       
</div>   
   
</div>
   
<div class="contenido">
        texto
<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>
        texto
<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>
        texto
<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>
   
</div>
</div>

<style type="text/css">
    .cabecera {
        height:120px;
        width:600px;
        margin:0 auto;
        background:orange;
    }
   
    .marco {
        width:600px;
        margin:0 auto;
        padding-top:16px;
    }
       
    .menu-borde {
        float:right;
        width:200px;
    }
   
    .menu {
        position:absolute;
        width:200px;
        background:lightblue;
    }
       
    .contenido {
        margin-right:200px;
        background:silver;
        height:2000px;
    }
</style>

<script type="text/javascript">
    function scrollMenu(event) {
        var y = window.scrollY;
        var menu = document.getElementById('menu');
       
        if (typeof menu.originalY === "undefined")
            menu.originalY = menu.offsetTop;
       
        if (y>menu.originalY) {
            menu.style.top = '0px';
            menu.style.position = 'fixed';
        } else {
            menu.style.top = '';
            menu.style.position = 'absolute';
        }
    }
    window.onscroll = scrollMenu;
</script>
25
Aug
2011
por Invitado
0 respuestas

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/treeweb/www_ovillo/class/Textile.class.php on line 1526

Todo muy claro. Muchísimas gracias.