html - navegacion - Hacer que una barra de navegación se adhiera a la parte superior cuando se desplaza con css

menu desplegable vertical html

Question

Estoy intentando hacer que mi barra de navegación se mueva con la página, pero quédate en la parte superior si el usuario se desplaza hacia abajo. ¿Alguien podría proporcionar ejemplos o cómo hacerlo? Muy apreciado. (Soy inútil en cualquier otro idioma). Intenté usar el CSS pegajoso pero no funcionó.

<div class="headercss">
    <div class="headerlogo"></div>
    <div class="nav">
        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>
    </div>
</div>

/* www..com
Blinx Service
Created by Pierre Chedraoui
(c) Copyright 2015
*/

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: relative;
}

.nav {
    width: auto;
    height: 70px;
    background-color: #272727;
    position: relative;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:100%;
    overflow: hidden;
}


li {
    float: left;
    width:25%;
    min-width: 243px;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    height: 68px;
    min-width: 243px;
    font-size: 12px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: ''Raleway'', Arial;
    letter-spacing: 2pt;
    line-height: 200%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}

Answer 1

CSS:

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
}

La position: fixed atributo position: fixed lo mantendrá atascado, mientras que otro contenido será desplazable. No olvides configurar el width:100% para que se llene completamente a la derecha.

Ejemplo

Answer 2

Dar la posición headercss fija.

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
    top:0
}

A continuación, proporcione al contenido del contenedor un relleno de 320 píxeles, de modo que no quede detrás del encabezado.

Answer 3

Espero que esto pueda ayudar a alguien. Determine la compensación de navegación a través de js y luego aplique la posición adhesiva css a la navegación:

Pero primero, definiremos los estilos en la hoja de estilos, como tal.

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

Luego, aplicaremos esa clase a la navegación condicionalmente con jQuery.

$(document).ready(function() {
  var stickyNavTop = $(''.nav'').offset().top;

  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
      $(''.nav'').addClass(''sticky'');
    } else {
      $(''.nav'').removeClass(''sticky''); 
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

Answer 4

Para hacer el encabezado fijo, primero debe dar la posición: fijo; para encabezado en css. Luego puede ajustar el ancho y alto, etc. Recomiendo encarecidamente seguir este artículo. Cómo crear un encabezado de página web adhesiva

Aquí también está el código para evitar el encabezado y hacerlo pegajoso.

header { 
   position: fixed; 
   right: 0; 
   left: 0; 
   z-index: 999;
}

Este código arriba irá dentro de su archivo styles.css.

Answer 5

Puede hacerlo con CSS solo creando su menú dos veces. No es ideal pero te da la oportunidad de tener un diseño diferente para el menú una vez que esté en la parte superior y no tendrás nada más que CSS, sin jquery. Aquí hay un ejemplo con DIV (por supuesto, puede cambiarlo a NAV si lo prefiere):

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

Y luego tiene el siguiente CSS:

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

Aquí hay un violín para que veas: https://jsfiddle.net/brghtk4z/1/

Answer 6

Simplemente llame a este código y llámelo a la barra de navegación para obtener una barra de navegación adhesiva.

  .sticky {
        /*css for  stickey navbar*/
        position: sticky;
        top: 0; 
        z-index: 100;
    }

Answer 7

Simplemente use la propiedad CSS z-index como se describe en la respuesta más popular y la barra de navegación se mantendrá en la parte superior.

Ejemplo :

<div class="navigation">
 <nav>
   <ul>
    <li>Home</li>
    <li>Contact</li>
   </ul>
 </nav>

.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;
   /* z-index works pretty much like a layer:
   the higher the z-index value, the greater
   it will allow the navigation tag to stay on top
   of other tags */
}

Answer 8

Yo recomendaría usar Bootstrap. http://getbootstrap.com/ . Este enfoque es muy directo y ligero.

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-fixed-top">
            <li><a href="#home"> <br>BLINK</a></li>
                <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
                <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
                <li><a href="#about"><br>ABOUT US</a></li>
            </ul>
        </div>
    </div>
</div>

Debe incluir Bootstrap en su proyecto, que incluirá los scripts y estilos necesarios. Luego solo llame a la clase ''navbar-fixed-top''. Esto hará el truco. Ver el ejemplo anterior

Answer 9

añadir a su bloque .nav css el

position: fixed

y funcionará

Answer 10

$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $(''#nav_bar'').addClass(''navbar-fixed'');
    }
    if ($(window).scrollTop() < 281) {
      $(''#nav_bar'').removeClass(''navbar-fixed'');
    }
  });
});

html, body {
 height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
 top: 0;
 position: relative;
    height: 200px;
    background-color: green;
}

#banner {
 width: 100%;
 height: 273px;
    background-color: gray;
 overflow: hidden;
}

#nav_bar {
 border: 0;
 background-color: #202020;
 border-radius: 0px;
 margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
 display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
 padding: 0 15.5px;
 color: #3498db;
 text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id=''nav_bar''>
    <ul class=''nav_links''>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id=''body_div''>
    <p style=''margin: 0; padding-top: 50px;''>and more stuff to continue scrolling here</p>
</div>

Answer 11

/* Add css in your style */


.sticky-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;
}


/* and use this javascript code: */

$(document).ready(function() {

  $(window).scroll(function () {
    if ($(window).scrollTop() > ) {
      $(''.headercss'').addClass(''sticky-header'');
    } else{
      $(''.headercss'').removeClass(''sticky-header'');
    }
  });
});