1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda menú pegajoso con HTML,CSS y jQuery, error no me funciona

Tema en 'Tutoriales de FalconMasters' comenzado por IVÁN HEREDIA PLANAS, 18 de Julio de 2017.

  1. IVÁN HEREDIA PLANAS

    IVÁN HEREDIA PLANAS Nuevo Miembro

    Se incorporó:
    18 de Julio de 2017
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola, estoy haciendo un menú pegajoso, lo tengo todo bien puesto:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>ESO</title>
        <link rel="stylesheet" href="estilos.css">
        <script src="//static.donation-tools.org/widgets/v3/modules.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="main.js"></script>
        <link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico">
    <body style="background-image: url(imagenes/stackofmagazines.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover;">
        <header>
            <div class="contenedor">
                <a href="http://www.ies-calvia.260mb.net" style="text-decoration:none;"><img src="imagenes/logo_GTE.png" style="position: absolute; height: 100px; width: 100px"></a>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <nav class="menu">
                    <ul>
                        <li><a href="#">1 ESO</a></li>
                        <li><a href="#">2 ESO</a></li>
                        <li><a href="#">3 ESO</a></li>
                        <li><a href="#">4 ESO</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </body>
    </html>    
    estilos.css
    Código (CSS):
    * {
        padding: 0;
        margin: 0;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing: border-box;
    }
    .contenedor {
        width: 95%;
        max-width: 1000%;
        margin: auto;
    }

    header nav {
        background: #3498db;
        margin-bottom: 10px;
    }
    header nav ul {
        list-style:none;
        overflow:hidden;
    }
    header nav ul li {
        float: left;
    }
    header nav ul li a {
        display: block;
        padding: 20px;
        color: #fff;
        text-decoration: none;
        font-family: segoe script;
    }
    header nav ul li a:hover {
        background: #2980b9;
    }
    .menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 95%;
        max-width: 1000%;
        box-shadow: 0px 4px 3px rgba(0,0,0,.5);
    }
    scroll.js:
    Código (Javascript):
    $(document).ready(function(){
        var altura = $('.menu').offset().top;
     
        $(window).on('scroll', function(){
            if ( $(window).scrollTop() > altura ){
                $('.menu').addClass('menu-fixed');
            } else {
                $('.menu').removeClass('menu-fixed');
            }
        });

    });
    El css funciona correcto la llamada es correcta, pero en js llamo el scroll.js (cambié el nombre), por
    Código (Javascript):
    <script src="scroll.js"></script>
    , también puse dos scripts más en las estiquetas <head>, son estas:
    Código (Javascript):
    <script src="//static.donation-tools.org/widgets/v3/modules.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    No me funciona y en el navegador no detecta ningún problema ¿Porque será?
     
  2. crix07

    crix07 Miembro

    Se incorporó:
    13 de Abril de 2017
    Mensajes:
    35
    Me gusta recibidos:
    2
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    Diseñador Web y estudiando para Desarrollo Web =)
    Localización:
    República Dominicana, Santo Domingo
    Página web:
    men no veo que cierras la etiqueta </head> inicias el body sin cerrarla :/ y te recomiendo que llames siempre el jquery primero que todo y al body pudiste ponerles esos estilos en el archivo .css esa no es la manera correcta de hacerlo y con respecto al codigo javascript esta bien esa manera no tiene ningun error pero yo lo haria haci

    Código (Text):
    $(document).ready(function(){
       var altura = $('.menu').offset().top;

        $(window).scroll(function(){
           if ($(this).scrollTop() > altura ){
                $('.menu').addClass('menu-fixed');
           } else {
                $('.menu').removeClass('menu-fixed');
           }
       });

    });
     
  3. luismg

    luismg Nuevo Miembro

    Se incorporó:
    15 de Julio de 2017
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    también me paso eso a mi después de 3 mese de dolor de cabeza ver videos me rendí y después un dia, se me ocurrio poner el script del link abajo de body casi al final pero dentro de html y me funciono, creo que lee de arriba para abajo y ya no regresa. pero no me funcionaba con jquery asi ponga el document redy, bien puesto, me funciono con java script solo, y ponerlo al final de body. este es el codigo para javascript
    var menu = document.getElementById('stikyBar');
    var altura = menu.offsetTop;
    window.addEventListener('scroll', function () { 'use strict'; if (window.pageYOffset > altura) { menu.classList.add('fixed'); } else { menu.classList.remove('fixed'); } }); me funciona para uno simple pero, otra vez no me funciona para otro web un poquito mas complicado.
     

Comparte esta página