¿cuál es el html, css y script para hacer <div> header fixed responsive con un logo a la izquierda, pero que al hacer scroll down el header y logo reduzcan su tamaño y en la misma posicion fixed?
Aquí te proporciono un ejemplo de código que puede ayudarte a crear un header fijo responsivo con un logo a la izquierda que disminuya de tamaño al hacer scroll:
HTML:
```html
<header>
<div class="logo">
<img src="tu-logo.jpg" alt="Logo">
</div>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<!-- Contenido de la página -->
</main>
```
CSS:
```css
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 1000;
transition: all ease-in-out 0.3s;
}
header.shrink {
padding: 10px 0;
height: auto;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.logo img {
width: 150px;
height: auto;
margin: 10px;
transition: all ease-in-out 0.3s;
}
header.shrink .logo img {
width: 100px;
margin: 0;
}
nav {
float: right;
margin: 0;
padding: 0;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 100%;
}
nav li {
margin: 0;
padding: 0 20px;
list-style: none;
}
nav li a {
font-size: 16px;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color ease-in-out 0.3s;
}
nav li a:hover {
color: #007bff;
}
```
Javascript:
```javascript
var shrinkHeader = 50;
var headerElement = document.querySelector('header');
var logoElement = document.querySelector('.logo img');
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop;
if (distanceY > shrinkHeader) {
headerElement.classList.add('shrink');
logoElement.style.width = '100px';
} else {
headerElement.classList.remove('shrink');
logoElement.style.width = '150px';
}
});
```
En este ejemplo, el header está definido como un elemento `<header>` en HTML, con el logo y la información de navegación dentro de él. El header se fija en la parte superior de la página usando la propiedad `position: fixed` y se establece el ancho al 100%.
En CSS, el selector `header.shrink` establece el estilo que debe aplicarse cuando se hace scroll en la página, mientras que `header.shrink .logo img` define el tamaño del logo cuando se hace scroll. Usando `flexbox`, se sitúa la información de navegación en la parte derecha del header.
En el script Javascript, se establece la posición del encabezado cuando se desplaza la página y, al hacer scroll, cambia el tamaño del header y del logo según lo especificado por la clase CSS `.shrink` con la propiedad `classList`.
Es importante mencionar que este es solo un ejemplo y que se debe ajustar o personalizar el código según las necesidades del proyecto específico y que la estilización puede variar según la imagen de su logo.