Vamos a escribir la sintaxis para crear una barra de menús de posición fija en nuestra página web, veamos la sintaxis HTML y CSS que vamos a utilizar.
<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {
font-size: 26px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /*SAFARI*/
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4caf50;
}
</style>
</head>
<body>
<div class="header">
<h2>Desplaza el ratón hacia abajo</h2>
<p>Desplaza el botón hacia abajo para ver el efecto</p>
</div>
<ul>
<li><ahref="#"class="active">Home</a></li>
<li><ahref="#">Quienes somos</a></li>
<li><ahref="#">Donde estamos</a></li>
<li><ahref="#">Contacto</a></li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you
reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky
positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</body>
</html>