<div class="header">
  <h2>Desplaza hacia abajo</h2>
  <p>Para ver el efecto Sticky Bar.</p>
</div>

<div id="navbar">
  <a class="active" href="">Home</a>
</div>

<div class="content">
  <h3>Ejemplo de navegacion fija</h3>
  <p>El NAVBAR se quedara fijo al desplazar.</p>
  <p>La sticky bar es un elemento muy usado en el diseño web actual, dentro de las ventajas se encuentra:
Mejora la usabilidad de la web al tener los elementos de navegación siempre disponibles para los usuarios.
La barra de navegación es el mejor sitio para resaltar vínculos, imágenes, campo de búsqueda, menus o anuncios. Ya que está siempre visible, mejora enormemente la posibilidad de que los visitantes hagan clic en ellos.</p>
  
</div>

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

window.onscroll = function() {navegacion()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function navegacion() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
Categorías: Uncategorized

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Copy Protected by Chetan's WP-Copyprotect.