Sticky bar

Minienzoo · #1 (**permalink**) 13/02/2016, 10:27

Buenas, soy yo de nuevo

Estoy intentando hacer una barra que se quede "fixed" en la parte superior después de desplazar la cabecera.
Busqué varios scripts super complejos que no entendía y entre algunos encontré uno simple, pero parece no funcionar en mi "página", según Brackets estaba mal escrito el código así que cambié unas cositas para que me lo admita, pero no va ><
Dejo en claro que no sé nada de JS y quería saber si alguno me explicaba por qué no va.

HTML

Código:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css.css">
        <!--Script: https://jsfiddle.net/reimeister/8kGE5/ - Zibi Gargasz -->
        <script type="text/javascript" src="js.js"></script>
    </head>
    
    <body heigt: 2000>
        <div id="cabecera">
            <div id="banner">
                <div class="pitch">hola</div>
            </div>
            <nav>
                <div class="contenedor"></div>
            </nav>
        </div>
    </body>
</html>

CSS

Código:

#cabecera {
    background-image: url("banner.png");
    background-repeat: no-repeat;
    background-position: center top;
}

#banner {
    text-align: center;
}

.pitch {
    display: inline-block;
    margin-top: 310px;
    margin-bottom: 10px;
    max-width: 400px;
    font-style: italic;
    color: #884037;
    font-family: "Times new roman", serif;
    font-size: 15pt;
}

body {
    background-color: #0B0A11;
    padding: 0px;
    margin: 0px;
    color: #DEBE8C;
    font-size: 12pt;
    font-family: Arial, sans-serif;
    height:1500px;
    width: 100%;
}



nav {
    background-color: aqua;
    text-align: center;
    height: 50px;
    width: 100%;
}


.contenedor {
    margin: auto;
    width: 1000px;
    right: 0;
    left: 0;
}

fixed {
  position:fixed;
  z-index:999;
}

JS

Código:

var win      = (window),
    fxel     = ('nav'),
    eloffset = fxel.offset().top;

win.scroll(function () {
    "use strict";
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
});

Acá el script sí le funciona https://jsfiddle.net/reimeister/8kGE5/
Si uso el script tal cual me saltan estos errores

así que saqué los $ y agregué el "use strict";

O quizá alguien tiene otra manera de hacerlo, agradecería mucho saberlo.
Gracias de antemano^^

ZedGe1505 · #2 (**permalink**) 15/02/2016, 06:38

Hola que tal =D

Bueno el problema es simple:

Primero debes agregar el indicador '$' cuando utilizas jquery para poder usas sus funcionalidades, es decir, tu js debiera quedar así:

Código Javascript:

Ver originalvar win      = $(window),
fxel     = $('nav'),
eloffset = fxel.offset().top;

Segundo, tu problema también esta en el css... cuando pones fixed, estas diciendo que existe una etiqueta llamada fixed que es igual a un div, al body, al head, al nav, pero fixed no es parte del grupo de etiquetas. Tu css debe ser

Código CSS:

Ver originalnav.fixed {
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

Saludos.