0

Estoy usando un pequeño código de javascript para que, una vez superado los 400 píxeles de altura, si se hace scroll hacia arriba el menú se muestre. El problema es que lo hace de forma brusca e incluso el contenido se mueve. Queda horrible la verdad:

Código HTML:

<header class="web-menu">

<div id="contenedor_header" class="contenedor_header">

<div style="z-index: 2000" class="boton_menu">
    <label class="fa fa-bars" for="boton"></label>
</div>

<div class="header_derecha">

    <nav class="menu">
        <!-- CONTENIDO DE ENLACES -->  
    </nav>
</div>



</div>
</header>

Código JS:

var $web_menu=$('.web-menu');
      var $win=$(window);
      var $ultimo_scroll=0;
      var $altura_header=$web_menu.height();
      $win.on('scroll',function(){
        var $altura=$win.scrollTop()
        if($altura_header<$altura){
          $web_menu.addClass('header_oculto');
        }else{
          $web_menu.removeClass('header_oculto');
        }
    
        if($ultimo_scroll>$altura&&$altura>400){
          $web_menu.addClass('header_fijo');
        }else{
          $web_menu.removeClass('header_fijo');
        }
    
        $ultimo_scroll=$altura;
      });
.web-menu {
    position: inherit;
}

header {
    height: 75px;
    background: #000;
    width: 100%;
    z-index: 150;
    position: relative;
    color: #fff;
    background-image: url(https://s1.postimg.org/s1y5lzgxr/header_largo.png);
    transition: opacity .35s ease .2s;
    opacity: 1;
}

.contenedor_header a img {
    width: 150px;
}

.header_derecha {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header class="web-menu">
<div class="header_img">
</div>

<div id="contenedor_header" class="contenedor_header">
<a class="header_logo" href="https://www.laxtore.com/"><img src="https://www.laxtore.com/imagenes/laxtore_logo_nuevo_solidaridad_contra_terror.png" alt=""></a>

<div style="z-index: 2000" class="boton_menu">
    <label class="fa fa-bars" for="boton"></label>
</div>

<div class="header_derecha">
    <div class="derecha_buscador">
        <form class="busqueda" action="https://www.laxtore.com/busqueda.php" method="get">
            <input type="text" id="busqueda" name="busqueda" placeholder="Buscar un juego..." autocomplete="off" onkeyup="buscar();">
            <button style="color: white;" type="submit" name="button" class="fa fa-search"></button>
        </form>
        <div id="resultadoBusqueda"></div>

        <section class="usuario">
            <div class="usuario_foto">
                <img src="https://www.laxtore.com/imagenes/monigote.png" alt="Invitado">            </div>

            
            <div class="sesion">
                <a rel="nofollow" href="#" id="invitado">Invitado</a><div id="inicio_registro"><a class="iniciemos" href="https://www.laxtore.com/Iniciar-Sesion/">Iniciar Sesión</a><a href="https://www.laxtore.com/Registro/">Registrarse</a></div>

            </div>
            <div id="sesion_popup">
                <a href="https://www.laxtore.com/Iniciar-Sesion/">Login avanzado</a>
                <a href="https://www.laxtore.com/Registro/">Registrarse</a>
                <form class="credenciales" action="https://www.laxtore.com/" method="post">
                    <div class="inputs">
                        <input type="text" name="usuario" placeholder="Usuario:">
                        <input type="password" name="password" value="Contraseña:">
                    </div>
                    <input class="submit_login" type="submit" name="submit_login" value="►">
                </form>

            </div>

            <div id="panel_usuario_popup">
                <div class="fila">
                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-sliders" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Inicio/">Panel de control</a>
                    </div>

                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Mensajes-privados/Recibidos/">Mensajes privados</a>
                    </div>
                </div>

                <div class="fila">
                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-trophy" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Logros/">Progreso de logros</a>
                    </div>

                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-commenting" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Mis-Mensajes/pagina=1/">Mis mensajes</a>
                    </div>
                </div>

                <div class="fila">
                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-bookmark" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Mis-hilos-abiertos/pagina=1/">Mis hilos abiertos</a>
                    </div>

                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-at" aria-hidden="true"></i>

                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Menciones/">Mis menciones</a>
                    </div>
                </div>

                <div class="fila">
                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cp/Inicio/Mis-suscripciones/pagina=1/">Mis hilos favoritos</a>
                    </div>

                    <div class="fila-enlace">
                        <div class="icon_wrapper">
                            <i class="fa fa-power-off" aria-hidden="true"></i>
                        </div>
                        <a href="https://www.laxtore.com/cerrar_sesion.php">Cerrar sesión</a>
                    </div>
                </div>
            </div>

        </section>
    </div>


    <nav class="menu">
        <ul>

            <section class="usuario">
                <div class="usuario_foto">
                    <img src="https://www.laxtore.com/imagenes/monigote.png" alt="Invitado">                </div>

                
                <div class="sesion">
                    <a rel="nofollow" href="#" id="invitado_movil">Invitado</a><div id="inicio_registro_movil"><a class="iniciemos" href="https://www.laxtore.com/Iniciar-Sesion/">Iniciar Sesión</a><a href="https://www.laxtore.com/Registro/">Registrarse</a></div>                </div>

                <div id="sesion_popup_movil">
                    <a href="https://www.laxtore.com/Iniciar-Sesion/">Login avanzado</a>
                    <a href="https://www.laxtore.com/Registro/">Registrarse</a>
                    <form class="credenciales" action="https://www.laxtore.com/" method="post">
                        <div class="inputs">
                            <input type="text" name="usuario" placeholder="Usuario:">
                            <input type="password" name="password" value="Contraseña:">
                        </div>
                        <input class="submit_login" type="submit" name="submit_login" value="►">
                    </form>

                </div>

                <div id="panel_usuario_popup_movil">
                    <div class="fila">
                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-sliders" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Inicio/">Panel de control</a>
                        </div>

                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Mensajes-privados/Recibidos/">Mensajes privados</a>
                        </div>
                    </div>

                    <div class="fila">
                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-trophy" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Logros/">Progreso de logros</a>
                        </div>

                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-commenting" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Mis-Mensajes/pagina=1/">Mis mensajes</a>
                        </div>
                    </div>

                    <div class="fila">
                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-bookmark" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Mis-hilos-abiertos/pagina=1/">Mis hilos abiertos</a>
                        </div>

                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-at" aria-hidden="true"></i>

                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Menciones/">Mis menciones</a>
                        </div>
                    </div>

                    <div class="fila">
                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cp/Inicio/Mis-suscripciones/pagina=1/">Mis hilos favoritos</a>
                        </div>

                        <div class="fila-enlace">
                            <div class="icon_wrapper">
                                <i class="fa fa-power-off" aria-hidden="true"></i>
                            </div>
                            <a href="https://www.laxtore.com/cerrar_sesion.php">Cerrar sesión</a>
                        </div>
                    </div>
                </div>

            </section>



            <li><a class="enlace" href="http://vivexbox.com">VIVEXBOX</a></li>
            <li class="submenu"><a class="enlace" href="#">LISTADO JUEGOS</a>
                <ul>
                    <li><a class="enlace" href="https://www.laxtore.com/Juegos/Indice-Precios/">Índice</a></li>
                    <li><a class="enlace" href="https://www.laxtore.com/Juegos/Xbox-One/">Xbox One</a></li>
                    <li><a class="enlace" href="https://www.laxtore.com/Juegos/Xbox-360/">Xbox 360</a></li>
                    <li><a class="enlace" href="https://www.laxtore.com/Juegos/Xbox-One/retrocompatibles/">Retrocompatibles</a></li>
                    <li><a class="enlace" href="https://www.laxtore.com/Juegos/Deals-With-Gold/">Deals With Gold</a></li>
                    <!--- <li><a class='enlace' href="https://www.laxtore.com/Ultimate-Game-Sale/">Ultimate Game Sale</a></li> -->
                </ul>

            </li>
            <li class="submenu"><a class="enlace" href="#">SUSCRIPCIONES</a>
                <ul>
                                        <li><a class="enlace" href="https://www.laxtore.com/Suscripciones/EA-Access/52/EA-Access-12-months/">EA Access</a></li>
                                        <li><a class="enlace" href="https://www.laxtore.com/Suscripciones/Xbox-Live-Gold/54/Xbox-Live-Gold-1-month/">Xbox Live Gold</a></li>
                                        <li><a class="enlace" href="https://www.laxtore.com/Suscripciones/Xbox-Game-Pass/57/Xbox-Game-Pass/">Xbox Game Pass</a></li>
                </ul>

            </li>
            <li><a class="enlace" href="https://www.laxtore.com/foro/">FORO</a></li>
            <li><a class="enlace" href="https://www.laxtore.com/contacto/">CONTACTO</a></li>
        </ul>
    </nav>
</div>



</div>
</header>

<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</body>

5
  • En el snippet no se puede reproducir. Has de añadir un div o algo para que se pueda hacer scroll
    – lois6b
    Commented el 26 oct. 2017 a las 10:19
  • @lois6b Lo he intentado pero no me hace el efecto del JS que me hace en la web. Es la primera vez que inserto un snippet aquí.
    – user27826
    Commented el 26 oct. 2017 a las 10:22
  • Puedes poner un gif o algo que nos de una idea de qué esta sucediendo ?
    – lois6b
    Commented el 26 oct. 2017 a las 10:26
  • Lo que quieres es que a cualquier altura de la página, si el usuario hace scroll hacia arriba, el menú se muestre, no? Como la barra de direcciones del navegador en un móvil... Commented el 26 oct. 2017 a las 10:34
  • @PabloLozano Esa es la idea, solo que tanto en escritorio como para móviles, y siempre que el scrollup tenga una altura de 400 pixeles, más que nada porque a menos de 400 pixeles el menú "original" está a mano.
    – user27826
    Commented el 26 oct. 2017 a las 10:55

2 respuestas 2

0

Cuando ejecuto tu snippet, no me hace ese efecto que tu describes. El banner superior(que yo entiendo que es lo que quiere aparezca y desaparezca) está fijo.

Aun así veo en el JS lo haces aparecer/desaparecer añadiendo o quitando una clase, es decir, modificando CSS. Yo para estos efectos uso la animación de JQuery de slide o la de fade

$('.clase del elemento que quiero que aparezca/desaparezca').fadeToggle(100);

Pequeña explicación con toggle,(con slide es igual).

Con .fadeIn(); aparecería,

Con .fadeOut(); desaparecería

Con .fadeToggle(); el ya sabe diferenciar si ha de aparecer o no, evitando los if else

0

Para eso te recomiendo que uses la propiedad css llamada position: sticky, siendo esa propiedad la que cambies cuando hagas el scroll. Para profundizar más sobre el tema busca en Google el artículo de la Mozilla Developers llamado Scroll linked effects.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.