Foros del Web » Programando para Internet » Javascript »

Sticky bar

Estas en el tema de Sticky bar en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/02/2016, 10:27
Avatar de Minienzoo  
Fecha de Ingreso: septiembre-2015
Mensajes: 13
Antigüedad: 6 años, 9 meses
Puntos: 1
Sticky bar

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^^
  #2 (permalink)  
Antiguo 15/02/2016, 06:38
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 11 años
Puntos: 15
Respuesta: Sticky bar

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 original
  1. var win      = $(window),
  2. fxel     = $('nav'),
  3. 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 original
  1. nav.fixed {
  2.   position:fixed;
  3.   top:0px;
  4.   right:0px;
  5.   left:0px;
  6.   z-index:999;
  7. }

Saludos.

Etiquetas: bar, funcion, html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:29.