Antes de nada adjunto el código:
Aún no es responsive
$(document).ready(function() {
$('#navegador-adaptativo').hide();
$('#navegador-incial').show();
$('#boton-menu-responsive').click(function() {
$('#boton-menu-responsive').toggleClass('rotar');
});
$(window).scroll(function() {
if ($(document).scrollTop() > 220) {
$('#navegador-incial').hide();
$('#navegador-adaptativo').show();
$('#navegador-adaptativo-contenido ul li a.underline').addClass('anim-underline');
} else {
$('#navegador-adaptativo').hide();
$('#navegador-incial').show();
$('#navegador-adaptativo-contenido ul li a.underline').removeClass('anim-underline');
}
});
});
body,
html {
width: 100%;
height: 2000px;
min-height: 470px;
min-width: 300px;
position: relative;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
background-color: brown;
}
header {
display: block;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.77), transparent);
}
#navegador-incial {
height: 220px;
width: 96%;
padding-bottom: 20px;
border-bottom: 3px solid white;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.contenedor-logo {
height: 100%;
padding: 0;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
#logo-grande {
height: 100%;
}
#logo-min {
height: 90%;
}
#navegador-inicial-contenido {
height: 100%;
float: right;
}
#navegador-inicial-contenido ul {
height: 100%;
}
#navegador-inicial-contenido ul li a {
padding-top: 0;
padding-bottom: 0;
padding-right: 10px;
padding-left: 10px;
text-transform: uppercase;
font-weight: 600;
color: white;
font-size: 15px;
}
#navegador-inicial-contenido ul li a:focus {
background-color: inherit;
}
#navegador-inicial-contenido ul li a:hover {
background-color: inherit;
text-shadow: 0px 1px 26px rgb(255, 254, 255);
}
#entrar {
margin: 0;
background-color: transparent;
border: 2px solid white;
cursor: pointer;
color: white;
font-size: 15px;
padding: 16px 31px;
text-decoration: none;
text-shadow: 0px 1px 0px #2f6627;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
border-radius: 0px;
}
#idioma {
width: 40px;
}
#entrar:hover {
background-color: white;
color: #091d3e;
text-decoration: none;
}
#entrar:active {
position: relative;
top: 1px;
text-decoration: none;
}
#navegador-adaptativo {
position: fixed;
background: #091d3e;
width: 100%;
height: 90px;
}
#navegador-adaptativo-contenido {
position: relative;
}
#navegador-adaptativo-contenido ul li a {
line-height: 74px;
font-size: 15px;
color: white;
padding-right: 10px;
padding-left: 10px;
text-transform: uppercase;
font-weight: 600;
position: relative;
}
#navegador-adaptativo-contenido ul li a:focus {
background-color: inherit;
}
#navegador-adaptativo-contenido ul li a:hover {
background-color: inherit;
text-shadow: 0px 1px 26px rgb(255, 254, 255);
}
.boton-centrado {
position: relative;
top: 50%;
transform: translate(0%, -50%);
}
.anim-underline:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
width: 100%;
background-color: white;
animation: width 0.5s;
transform: scaleX(0);
transition: all 0.4s;
border-radius: 1px;
}
.anim-underline:hover:before {
transform: scaleX(1);
}
.subrayado:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background-color: white;
animation: width 0.5s;
transform: scaleX(0);
transition: all 0.4s;
border-radius: 1px;
text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
}
.subrayado:link:before {
transform: scaleX(1);
}
.subrayado {
text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
}
#boton-menu-responsive {
border: 3px solid white;
color: white;
font-size: 30px;
width: 55px;
height: 55px;
position: relative;
padding: 0;
}
#boton-menu-responsive span {
position: relative;
line-height: 0px;
top: 50%;
transform: translate(0%, -50%);
}
.rotar {
transform: rotate(90deg);
}
@media (min-width: 768px) and (max-width: 1199px) {}
@media (max-width: 992px) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu con transparencia</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
<!--########################## - CSS - ##########################-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav id="navegador-incial">
<div class="contenedor-logo navbar-brand">
<a href=""> <img id="logo-grande" src="IMAGENES/siade_1tinta_a.png"></a>
</div>
<div id="navegador-inicial-contenido" class="navbar-nav">
<ul class="nav align-items-end">
<li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link" href="#caracteristicas">Características</a> </li>
<li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link" href="#casos-estudio">Casos de Estudio</a> </li>
<li class="nav-item"> <a id="seccion-noticias" class="nav-link" href="#noticias">Noticias</a> </li>
<li class="nav-item"> <a id="seccion-colaboradores" class="nav-link" href="#colaboradores">Colaboradores</a> </li>
<li class="nav-item"> <a id="seccion-contacto" class="nav-link" href="#contacto">Contacto</a> </li>
<li class="nav-item">
<a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
</li>
<li id="zonaEntrar" class="nav-item">
<button id="entrar" type="submit" class="btn btn-default" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
</li>
</ul>
</div>
</nav>
<nav id="navegador-adaptativo" class="navbar navbar-expand-lg ">
<div class="contenedor-logo">
<a href=""><img id="logo-min" src="IMAGENES/siade_1tinta_a_peque.png"> </a>
</div>
<button id="boton-menu-responsive" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navegador-adaptativo-contenido" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
<div id="navegador-adaptativo-contenido" class="collapse navbar-collapse">
<ul class="nav ml-auto">
<li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link underline" href="#caracteristicas">Características</a> </li>
<li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link underline" href="#casos-estudio">Casos de Estudio</a> </li>
<li class="nav-item"> <a id="seccion-noticias" class="nav-link underline" href="#noticias">Noticias</a> </li>
<li class="nav-item"> <a id="seccion-colaboradores" class="nav-link underline" href="#colaboradores">Colaboradores</a> </li>
<li class="nav-item"> <a id="seccion-contacto" class="nav-link underline" href="#contacto">Contacto</a> </li>
<li class="nav-item">
<a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
</li>
<li class="nav-item">
<button id="entrar" type="submit" class="btn btn-default boton-centrado" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
</li>
</ul>
</div>
</nav>
</header>
<section></section>
</body>
</html>
Se trata de un menú de navegación, que inicialmente esta transparente para mostrar la imagen o el vídeo que haya debajo. Al hacer scroll se cambiaría a un menú fijo mas visible, superpuesto al contenido. He tenido que hacer dos pues son tan diferentes que me pareció abrumador hacer mil clases y luego ir cambiándolas. Lo único que hago ahora es un evento que cuando se hace scroll hacia abajo a partir de 220px, el menú cambia al otro que inicialmente esta oculto.
¿Creéis que es una buena implementación? Es decir, ¿Habría algún problema con la carga de la página por utilizar javascript? Entiendo que cuanto mas css se use en vez de js mejor, pero como podéis ver me parecía muy abrumador hacer css para tantas cosas.
revisión de código
, ya que según he estado viendo, otros usuarios la incluyen para realizar este tipo de preguntas. En cuanto esté aplicada la edición incluyo mi respuesta.