1

Estoy intentando que la navbar de mi página web se quede pegada cuando scrolleo hacia abajo, intenté de varias maneras(position sticky y top 0px, usar clases, etc) y no pude lograr este efecto.

¿Cómo puedo hacer para que el navbar se quede pegado al scrollear?

Ahi les dejo el css y el html.

CSS:

    body{
        font-size:20px;
        margin:0px;
        font-family: 'Palanquin Dark', sans-serif;
        background-image:url(fondo.png);
        background-size:12%;
    }
    
    #topbardiv{
        background-color:whitesmoke;
        font-family: 'Palanquin Dark', sans-serif;
    }
    .topbardiv{
        Position:sticky;
        Top:0px;
    }
    
    #menu{
        text-align: center;
        list-style: none;
        border:30px;
        margin:0;    
        align-items:flex-end;
        display:flex;
        justify-content: center;
        border-bottom:rgb(214, 190, 173);
        border-bottom-width:4px;
        border-bottom-style:solid;
        box-shadow: 0 0 7px rgba(34,25,25,0.3);
    }
    
    #menu li{
        display: inline;
        padding:10 10 10 10;
        margin-top:60px;
        font-size: 24px;
        border-bottom:1px solid transparent;
    }
    
    #menu li:hover{
        color:black;
        border-bottom:1px solid black;
    }
    
    #howlies{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        margin-top:20px;
        left: 0;
        right: 0;
        text-align: center;
    }
    
    #comida{
        margin:0 150 0 70;
    }
    
    #accesorios{
        margin:0 0 0 70;
    }
    
    #ofertas{
        margin:0 70 0 150;
    }
    
    #informacion{
        margin:0 70 0 0;
    }
    
    /*-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
    
    #bienvenida{
        background-color:rgb(240, 236, 233);
        text-align:center;
        margin:120 710 120 710;
        padding:1.3%;
        border-radius:3px;
        box-shadow: 0 0 7px rgba(34,25,25,0.3);
    }
    
    /*-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
    
    #divperros{
        background-color:rgb(240, 236, 233);
        margin-right:400px;
        padding:10px 0px 110px 0px;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        box-shadow: 0px 0px 15px rgba(34,25,25,0.3);
    }
    
    #perrologo{
        margin-top:40px;
        position: absolute;
        margin-left:30px;
    }
    
    #menuperros{
        display:inline;
        list-style:none;
        display:flex;
        padding:0px;
        margin-left:50px;
    }
    #comidaperros:hover{
        background-color:rgb(220, 212, 196)
    }
    #comidaperros{
        margin-left:70px;
        border:solid 2px;
        padding: 10px 30px;
        border-radius:50px;
        box-shadow: 0px 0px 3px rgba(34,25,25,0.3);
    }
    #accesoriosperros:hover{
        background-color:rgb(220, 212, 196)
    }
    #accesoriosperros{
        margin-left:685px;
        border:solid 2px;
        padding:10px 30px;
        border-radius:50px;
        box-shadow: 0px 0px 3px rgba(34,25,25,0.3);
    }
    
    #fraseperros{
        margin-left:695px;
    }
    
    /*-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
    
    #divgatos{
        background-color:rgb(240, 236, 233);
        margin-left:400px;
        margin-top:120px;
        margin-bottom:120px;
        padding:10 0 110 0;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        box-shadow: 0 0 15px rgba(34,25,25,0.3);
    }
    
    #menugatos{
        display:inline;
        list-style:none;
        display:flex;
        padding:0px;
        margin-right:50px;
    }
    #comidagatos:hover{
        background-color:rgb(220, 212, 196)
    }
    #comidagatos{
        margin-left:70px;
        border:solid 2px;
        padding:10px 30px;
        border-radius:50px;
        box-shadow: 0px 0px 3px rgba(34,25,25,0.3);
    }
    #accesoriosgatos:hover{
        background-color:rgb(220, 212, 196)
    }
    #accesoriosgatos{
        margin-left:336px;
        border:solid 2px;
        padding:10px 30px;
        border-radius:50px;
        box-shadow: 0px 0px 3px rgba(34,25,25,0.3);
    }
    
    #frasegatos{
        margin-left:320px;
    }
    
    /*-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
    
    #divotros{
        background-color:rgb(240, 236, 233);
        margin:0px 300px 120px 300px;
        padding:10 0 110 0;
        border-radius: 4px;
        box-shadow: 0 0 15px rgba(34,25,25,0.3);
    }
    
    #menuotros{
        display:inline;
        list-style:none;
        display:flex;
        padding:0px;
        margin-right:50px;
    }
    
    #comidaotros{
        margin-left:80px;
    }
    
    #accesoriosotros{
        margin-left:725px;
    }
    
    #fraseotros{
        margin-right:675px;
    }

HTML:

<html>
    <head>
        <link rel="icon" type="image/png" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="howliescss.css"> 
        <title>
            Howlies
        </title>
    </head>

    <body>
        <div id="topbardiv">
            <link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
            <img id="howlies" src="logo.png" alt="logo">
            <ul id="menu">
                <li id=:inicio>Inicio</li>
                <li id="accesorios">Accesorios</li>
                <li id="comida">Comida</li>                     <!--Marcadores-->
                <li id="ofertas">Ofertas</li>
                <li id="informacion">Informacion</li>
                <li>Cuenta</li>
            </ul>
        </div>

        <div id="bienvenida">
            <p>Bienvenidos a Howlies!</p>
            <p>Nos encargamos de proveer los productos de mayor calidad para tus mascotas.</p>                     
        </div>

        <div id="divperros">
            <img id="perrologo" src="perrologo1.png" alt="perrologo1">
            <p id="fraseperros">Los productos de mejor calidad para tu amigo peludo!</p><br>
            <ul id="menuperros">
                <li id="accesoriosperros">Accesorios</li>
                <li id="comidaperros">Comida</li>
            </ul>
        </div>
        
        <div id="divgatos">
            <p id="frasegatos">Los mejores productos para tu amigo felino!</p><br>
            <ul id="menugatos">
                <li id="accesoriosgatos">Accesorios</li>
                <li id="comidagatos">Comida</li>
            </ul>
        </div>
        
        <div id="divotros">
            <p id="fraseotros">Tambien trabajamos con otros animales!</p><br>
            <ul id="menuotros">
                <li id="accesoriosotros">Accesorios</li>
                <li id="comidaotros">Comida</li>
            </ul>
        </div>
    </body>
       
    


</html>
BetaM
  • 30,571
  • 7
  • 32
  • 50
Ramita
  • 23
  • 5
  • Claro, que se quede pegado a la parte superior de la pagina, como mismo stackoverflow, que scrolleas y se queda el menu pegado – Ramita Aug 28 '20 at 02:08

2 Answers2

1

Lo que buscas no es un menú sticky sino un menú con un posicionamiento de tipo fixed1, para no duplicar información recomiendo leas la publicación2 que existe ya aqui en SO en español al respecto (créditos a Francisco Romero)

Sin embargo rescatemos aspectos (de forma muy resumida) importantes:

  • Estos elementos se posicionan respecto de la ventana
  • El scroll no afecta a estos elementos (repito para un entendimiento amplio de este tema debemos revisar los enlaces propuestos)

Te comparto este ejemplo:

    <style>
      * {
        margin: 0;
        padding: 0;
      }
    
      .menu-listado {
        display: flex;
        position: fixed;
        width: 100%;
      }
      .menu-listado__elemento {
        background-color: teal;
        color: white;
        width: 33.33%;
        list-style: none;
      }
      .contenedor {
        border: 1px solid red;
        padding-top: 30px;
      }
    </style>
    <nav class="menu">
      <ul class="menu-listado">
        <li class="menu-listado__elemento">Stack</li>
        <li class="menu-listado__elemento">OverFlow</li>
        <li class="menu-listado__elemento">En Español</li>
      </ul>
    </nav>
    <main class="contenedor">
      <h1>Hola Mundo</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto tempora earum totam unde laborum fugit, perspiciatis similique quidem assumenda deleniti perferendis officiis dolores sapiente minima quis blanditiis cum facilis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto tempora earum totam unde laborum fugit, perspiciatis similique quidem assumenda deleniti perferendis officiis dolores sapiente minima quis blanditiis cum facilis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto tempora earum totam unde laborum fugit, perspiciatis similique quidem assumenda deleniti perferendis officiis dolores sapiente minima quis blanditiis cum facilis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa vero dolorem tenetur maiores expedita quia voluptate mollitia culpa, possimus blanditiis voluptatum placeat rem porro quo, nemo explicabo atque dolor.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto tempora earum totam unde laborum fugit, perspiciatis similique quidem assumenda deleniti perferendis officiis dolores sapiente minima quis blanditiis cum facilis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa vero dolorem tenetur maiores expedita quia voluptate mollitia culpa, possimus blanditiis voluptatum placeat rem porro quo, nemo explicabo atque dolor.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa vero dolorem tenetur maiores expedita quia voluptate mollitia culpa, possimus blanditiis voluptatum placeat rem porro quo, nemo explicabo atque dolor.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa vero dolorem tenetur maiores expedita quia voluptate mollitia culpa, possimus blanditiis voluptatum placeat rem porro quo, nemo explicabo atque dolor.
    </main>

En el cual:

  • A la lista desordenada le doy un posicionamiento fixed
  • Para lograr una separación entre el menú y el texto del cuerpo aplico un padding-top a este último; así evitamos que el texto del cuerpo quede parcialmente cubierto por el ménu
BetaM
  • 30,571
  • 7
  • 32
  • 50
0

En el CSS tienes las propiedades separadas entre un selector de clase y un selector de atributo id y debes unificarlas.

Es decir, cambia este código CSS

#topbardiv{
    background-color:whitesmoke;
    font-family: 'Palanquin Dark', sans-serif;
}
.topbardiv{
    Position:sticky;
    Top:0px;
}

por este otro

#topbardiv{
    background-color:whitesmoke;
    font-family: 'Palanquin Dark', sans-serif;
    position:sticky;
    top:0px;
}
Pablo Gutiérrez
  • 2,354
  • 2
  • 5
  • 14