itemtype='https://schema.org/Blog' itemscope='itemscope' class="post-template-default single single-post postid-1762 single-format-standard ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-blog-single-style-1 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

Barra de posición fija en la parte superior con CSS

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>
Scroll al inicio