0

Quiero que mi barra de navegación se quede fija en mi archivo web. He probado el position: sticky; top: 0; Pero no funciona, cuando la barra de navegación alcanza el valor top: 0, no se adhiere a la parte superior de la página. El parent no tiene una altura definida, y creo que ese es el problema, pero no sé qué altura le tengo que poner porque el padre es el contenido de la pagina y además no hay ancestors ​​con overflow oculto. Espero que alguien pueda ayudarme.

:root {
    --primary-color: #FF7F11;
    --secondary-color: #FCD757;
    --default-text: #f5f5f5; 
}
html{
    overflow-x: hidden;
     touch-action: none;
     -ms-touch-action: none;
}
body {
    box-sizing: border-box;
    margin: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: none;
    -ms-touch-action: none;
    box-sizing: border-box;
}
header{
   z-index: 999;
   position: absolute;
   padding: 15px 0;
   width: 100%;  
}
h1,p,a,h2,h3,h4 {
    font-family: 'Sawarabi Mincho', serif;
}
.menu{
    font-family: 'Sawarabi Mincho', serif;
}
.vl {
    border-left: 1px solid var(--primary-color);
    height: 30px;
  }
.header__content-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 120px;
    z-index: 999;
    transition: all 0.3s;
}
.header__img-container{
    display: flex;
    justify-content: center;
    width: 114px;
}
.main-logo {
    height: 80px; 
}
.menu__li {
    display: inline-block;
    margin: 0 25px;
    font-family: 'Sawarabi Mincho', serif;
    font-size: 18px;
    position: relative;
}
.menu__li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: var(--primary-color);
    transition: all 0.3s;
}
.menu__li:hover::after {
    width: 100%;
    left: 0;
}
.nav__list {
    padding: 0;
}
.menu__li>a{
    color: var(--default-text);
    text-decoration: none;
    display: block;
    padding: 10px;
    height: 100%;
    transition: all 0.2s;
}
.menu__li>a:hover {
    color: var(--primary-color);
}
.header__social-nav {
    display: flex;
    align-items: center;
}
.header__social-nav>div {
    margin: 8px;
    height: 22px;

}
.header__social-nav>div>a {
    text-decoration: none;
    color: var(--default-text);
}
.media-icon, .mobile-media-icon {
    font-size: 22px;
    transition: all 0.2s;
}
.media-icon:hover{
    color: var(--primary-color);
    scale: 1.1;
}
.carta-section{
    position: relative;
    height:50vh;
}
.carta-opacity{
    position: absolute;
    width: 100%;
    height:50vh;
    background-color: #0008;
}
.carta-img{ 
    object-fit: cover;
    width: 100%;
    height: 50vh;
}
.carta-title{
    position: absolute; 
    width: 100%;
    top: 50%;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
    width: 350px;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: 40px;
    transition: all 0.3s;
}
/* STICKY NAV BAR ---------------------------------------------------------------------------------------------------------------*/
.sticky-container{
    
    position: sticky;
    top: 0;
}
.carta-nav-bar{
    border-top: 3px solid black; border-bottom: 3px solid black; 
    
}
.carta-items-container{
    height: 75px;
    display: flex;
    align-items: center;
    margin: 0 120px;
    justify-content: space-between;
}
.carta-item{
    padding: 20px 40px; 
    background: var(--primary-color);
    border-radius: 10px;
    color: #fff;
    font-family: 'Roboto Slab';
    cursor: pointer;
    transition: all 0.3s;
}
.carta-item:hover{
    margin-bottom: 10px;
}
.carta-item:focus{
    margin-bottom: 10px;
    background: var(--secondary-color);
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.some-content{
    height: 3000px;
    background-color: var(--primary-color);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sticky.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;900&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="header__content-area">
            <div class="header__img-container"><img src="https://images.squarespace-cdn.com/content/v1/5c25361496e76fbea2848f55/1553282628515-4T7SHD0BOHGWX7YVNQEM/JP_3_IN_logo.png" alt="" class="main-logo"></div>
            <nav class="header__nav">
                <ul class="nav__list">
                    <li class="menu__li"><a href="index.html">INICIO</a></li>
                    <li class="menu__li"><a href="carta.html">CARTA</a></li>
                    <li class="menu__li"><a href="">MENÚS</a></li>
                    <li class="menu__li"><a href="">CONTACTO</a></li>
                </ul>
            </nav>
            <nav class="header__social-nav">
                <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"/></svg></a>
                </div>
                <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg></a>
                </div>
                <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l1.963 2.135a5.997 5.997 0 0 0 4.04 10.43a5.976 5.976 0 0 0 4.075-1.6L12 19.705l1.922-2.09a5.972 5.972 0 0 0 4.072 1.598a6 6 0 0 0 6-5.998a5.982 5.982 0 0 0-1.957-4.432L24 6.648h-4.35a13.573 13.573 0 0 0-7.644-2.353zM12 6.255c1.531 0 3.063.303 4.504.903C13.943 8.138 12 10.43 12 13.1c0-2.671-1.942-4.962-4.504-5.942A11.72 11.72 0 0 1 12 6.256zM6.002 9.157a4.059 4.059 0 1 1 0 8.118a4.059 4.059 0 0 1 0-8.118zm11.992.002a4.057 4.057 0 1 1 .003 8.115a4.057 4.057 0 0 1-.003-8.115zm-11.992 1.93a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256zm11.992 0a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256z"/></svg></a>
                </div>
            </nav>
        </div>
    </header>
    <div class="carta-content">
        <div class="carta-section">
            <div class="carta-opacity"></div>
            <div class="carta-img-container"><img class="carta-img" src="https://images.pexels.com/photos/313700/pexels-photo-313700.jpeg?auto=compress&cs=tinysrgb&w=1600" alt=""></div>
            <div><h1 class="carta-title">NUESTRA CARTA</h1></div>
        </div>
        <!--STICKY NAV BAR ------------------------------------------------------------------------------------------------>
        <div class="sticky-container">
            <div class="carta-nav-bar">
                <div class="carta-items-container">
                    <div tabindex="0" class="carta-item">
                        RACIONES
                    </div>
                    <div class="carta-item">
                        ENSALADAS
                    </div>
                    <div class="carta-item">
                        CARNES
                    </div>
                    <div class="carta-item">
                        PESCADOS
                    </div>
                    <div class="carta-item">
                        ARROCES
                    </div>
                    <div class="carta-item">
                        VINOS
                    </div>
                    <div class="carta-item">
                        POSTRES
                    </div>
                </div>
            </div>
        </div>
        <div class="some-content">
            SOME CONTENT
        </div>
    </div>
</body>
</html>

La barra de navegación es la que tiene cuadros naranjas, fondo blanco y borde superior e inferior. Alterna la opción de pantalla completa, no es responsive (todavía)

1

1 respuesta 1

1

En este caso debes utilizar position: fixed; para fijarlo donde quieres, el otro inconveniente es que la barra se mantendría en esa posición incluso sobreponiéndose al navbar, puedes resolver esto agregando una nueva clase .sticky e implementando un poco de JavaScript, ya que necesitas detectar cuándo el scroll pase por la barra de navegación, te dejo el código comentado.

// obtenemos navbar y stickyContainer
const navbar = document.querySelector('.header__nav');
const stickyContainer = document.querySelector('.sticky-container');

// obtenemos el alto de navbar
const navbarHeight = navbar.offsetHeight;

// agregamos un evento de scroll al documento
document.addEventListener('scroll', () => {
  // obtenemos la posición del scroll
  const scrollPosition = window.scrollY;

  // si la posición del scroll es mayor o igual al alto de navbar, agrega la clase .sticky a stickyContainer
  if (scrollPosition >= navbarHeight) {
    stickyContainer.classList.add('sticky');
  } else {
    // de lo contrario elimina la clase .sticky
    stickyContainer.classList.remove('sticky');
  }
});
:root {
  --primary-color: #FF7F11;
  --secondary-color: #FCD757;
  --default-text: #f5f5f5;
}

html {
  overflow-x: hidden;
  touch-action: none;
  -ms-touch-action: none;
}

body {
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  -ms-touch-action: none;
  box-sizing: border-box;
}

header {
  z-index: 999;
  position: absolute;
  padding: 15px 0;
  width: 100%;
}

h1,
p,
a,
h2,
h3,
h4 {
  font-family: 'Sawarabi Mincho', serif;
}

.menu {
  font-family: 'Sawarabi Mincho', serif;
}

.vl {
  border-left: 1px solid var(--primary-color);
  height: 30px;
}

.header__content-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 120px;
  z-index: 999;
  transition: all 0.3s;
}

.header__img-container {
  display: flex;
  justify-content: center;
  width: 114px;
}

.main-logo {
  height: 80px;
}

.menu__li {
  display: inline-block;
  margin: 0 25px;
  font-family: 'Sawarabi Mincho', serif;
  font-size: 18px;
  position: relative;
}

.menu__li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: var(--primary-color);
  transition: all 0.3s;
}

.menu__li:hover::after {
  width: 100%;
  left: 0;
}

.nav__list {
  padding: 0;
}

.menu__li>a {
  color: var(--default-text);
  text-decoration: none;
  display: block;
  padding: 10px;
  height: 100%;
  transition: all 0.2s;
}

.menu__li>a:hover {
  color: var(--primary-color);
}

.header__social-nav {
  display: flex;
  align-items: center;
}

.header__social-nav>div {
  margin: 8px;
  height: 22px;
}

.header__social-nav>div>a {
  text-decoration: none;
  color: var(--default-text);
}

.media-icon,
.mobile-media-icon {
  font-size: 22px;
  transition: all 0.2s;
}

.media-icon:hover {
  color: var(--primary-color);
  scale: 1.1;
}

.carta-section {
  position: relative;
  height: 50vh;
}

.carta-opacity {
  position: absolute;
  width: 100%;
  height: 50vh;
  background-color: #0008;
}

.carta-img {
  object-fit: cover;
  width: 100%;
  height: 50vh;
}

.carta-title {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 350px;
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  transition: all 0.3s;
}


/* STICKY NAV BAR ---------------------------------------------------------------------------------------------------------------*/

.sticky-container {
  position: sticky;
  top: 0;
}

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

.carta-nav-bar {
  border-top: 3px solid black;
  border-bottom: 3px solid black;
}

.carta-items-container {
  height: 75px;
  display: flex;
  align-items: center;
  margin: 0 120px;
  justify-content: space-between;
}

.carta-item {
  padding: 20px 40px;
  background: var(--primary-color);
  border-radius: 10px;
  color: #fff;
  font-family: 'Roboto Slab';
  cursor: pointer;
  transition: all 0.3s;
}

.carta-item:hover {
  margin-bottom: 10px;
}

.carta-item:focus {
  margin-bottom: 10px;
  background: var(--secondary-color);
}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.some-content {
  height: 3000px;
  background-color: var(--primary-color);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="sticky.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;900&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <header>
    <div class="header__content-area">
      <div class="header__img-container"><img src="https://images.squarespace-cdn.com/content/v1/5c25361496e76fbea2848f55/1553282628515-4T7SHD0BOHGWX7YVNQEM/JP_3_IN_logo.png" alt="" class="main-logo"></div>
      <nav class="header__nav">
        <ul class="nav__list">
          <li class="menu__li"><a href="index.html">INICIO</a></li>
          <li class="menu__li"><a href="carta.html">CARTA</a></li>
          <li class="menu__li"><a href="">MENÚS</a></li>
          <li class="menu__li"><a href="">CONTACTO</a></li>
        </ul>
      </nav>
      <nav class="header__social-nav">
        <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"/></svg></a>
        </div>
        <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg></a>
        </div>
        <div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l1.963 2.135a5.997 5.997 0 0 0 4.04 10.43a5.976 5.976 0 0 0 4.075-1.6L12 19.705l1.922-2.09a5.972 5.972 0 0 0 4.072 1.598a6 6 0 0 0 6-5.998a5.982 5.982 0 0 0-1.957-4.432L24 6.648h-4.35a13.573 13.573 0 0 0-7.644-2.353zM12 6.255c1.531 0 3.063.303 4.504.903C13.943 8.138 12 10.43 12 13.1c0-2.671-1.942-4.962-4.504-5.942A11.72 11.72 0 0 1 12 6.256zM6.002 9.157a4.059 4.059 0 1 1 0 8.118a4.059 4.059 0 0 1 0-8.118zm11.992.002a4.057 4.057 0 1 1 .003 8.115a4.057 4.057 0 0 1-.003-8.115zm-11.992 1.93a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256zm11.992 0a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256z"/></svg></a>
        </div>
      </nav>
    </div>
  </header>
  <div class="carta-content">
    <div class="carta-section">
      <div class="carta-opacity"></div>
      <div class="carta-img-container"><img class="carta-img" src="https://images.pexels.com/photos/313700/pexels-photo-313700.jpeg?auto=compress&cs=tinysrgb&w=1600" alt=""></div>
      <div>
        <h1 class="carta-title">NUESTRA CARTA</h1>
      </div>
    </div>
    <!--STICKY NAV BAR ------------------------------------------------------------------------------------------------>
    <div class="sticky-container">
      <div class="carta-nav-bar">
        <div class="carta-items-container">
          <div tabindex="0" class="carta-item">
            RACIONES
          </div>
          <div class="carta-item">
            ENSALADAS
          </div>
          <div class="carta-item">
            CARNES
          </div>
          <div class="carta-item">
            PESCADOS
          </div>
          <div class="carta-item">
            ARROCES
          </div>
          <div class="carta-item">
            VINOS
          </div>
          <div class="carta-item">
            POSTRES
          </div>
        </div>
      </div>
    </div>
    <div class="some-content">
      SOME CONTENT
    </div>
  </div>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.