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^^