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 'Jquery' comenzado por IVÁN HEREDIA PLANAS, 18 de Julio de 2017.

Estado del tema:
No está abierto para más respuestas.
  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
    HTML:
    són estas:
    HTML:
    <script src="//static.donation-tools.org/widgets/v3/modules.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    Vale, voy a ver si arranca bien el scroll.js pero no. En chrome me ponía que
    Código (Javascript):
    offset.top
    y le puse (), es decir,
    Código (Javascript):
    offset().top
    , y no me detectaba ningún problema, y no me funciona, ¿Porque será eso?¿No pongo algún script necessario?


    P.D: No funcioni ni en chrome, ni en Firefox, ni en IE
     
  2. oscar fernando

    oscar fernando Miembro Activo

    Se incorporó:
    20 de Noviembre de 2015
    Mensajes:
    190
    Me gusta recibidos:
    135
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    colombia
    A IVÁN HEREDIA PLANAS y AngelKrak les gusta esto.
  3. 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
    Muchísimas gracias, el fallo estaba en que el código JS no esta dentro del html y no tenia el script adecuado.
    Saludos desde Islas Baleares, España
     
  4. The Boy

    The Boy
    Moderador
    Miembro del Equipo

    Se incorporó:
    2 de Mayo de 2015
    Mensajes:
    397
    Me gusta recibidos:
    148
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Desarrollador web
    Localización:
    España
    Página web:
    Me alegra que haya quedado solucionado el problema.

    Cierro tema. ;)
     
Estado del tema:
No está abierto para más respuestas.

Comparte esta página