javascript - pegajoso - Cómo crear una barra de navegación adhesiva que se fija en la parte superior después de desplazarse

menu que te sigue html

Question

Estoy intentando hacer una barra de navegación que aparece en la parte inferior de la página visible cuando el sitio se carga por primera vez; luego, cuando el usuario se desplaza hacia abajo, la barra de navegación se desplaza hacia arriba y finalmente se fija en la parte superior. Estoy usando Bootstrap, al igual que este sitio, pero no puedo entender cómo lo hizo este sitio. ¿Alguna ayuda?

Aquí está el sitio con la barra de navegación que intento emular: http://www.blastprocessor.co.uk/

Aquí está mi código de navegación html y css:

HTML:

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

Y aquí está mi CSS:

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}

Answer 1

// en html

<nav class="navbar navbar-default" id="mainnav">
<nav>

// agregar en jquery

$(document).ready(function() {
  var navpos = $(''#mainnav'').offset();
  console.log(navpos.top);
    $(window).bind(''scroll'', function() {
      if ($(window).scrollTop() > navpos.top) {
       $(''#mainnav'').addClass(''navbar-fixed-top'');
       }
       else {
         $(''#mainnav'').removeClass(''navbar-fixed-top'');
       }
    });
});

Aquí está el jsfiddle para jugar: - http://jsfiddle.net/shubhampatwa/46ovg69z/

EDITAR: si desea aplicar este código solo para dispositivos móviles, puede usar:

   var newWindowWidth = $(window).width();
    if (newWindowWidth < 481) {
        //Place code inside it...
       }

Answer 2

Aquí hay un ejemplo de Bootstrap 3 que no requiere jQuery adicional. Utiliza el complemento Affix incluido en Bootstrap 3, pero el marcado de navegación ha cambiado desde BS2 ...

<!-- Content Above Nav -->
<header class="masthead">

</header>           


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
            ..
          </li>
          <li>
            ..
          </li>
        </ul>
      </div>        
    </div>
  </div><!-- /.navbar -->
</div>

Demo / plantilla de trabajo: http://bootply.com/69848

Answer 3

En respuesta a Shubham Patwa: De esta manera, la página está "nerviosa" pronto, ya que se aplica la clase "navbar-fixed-top". Esto se debe a que #mainnav entra y sale del flujo DOM del documento. Esto puede dar como resultado un UX feo si la página tiene una "altura crítica", saltando entre la posición #mainnav fija y la no fija.

Modifiqué el código de esta manera, que parece funcionar bien (no es perfecto para píxeles, pero está bien):

$(document).ready(function() {
  var navpos = $(''#mainnav'').offset();
  var navheight = $(''#mainnav'').outerHeight();

$(window).bind(''scroll'', function() {
  if ($(window).scrollTop() > navpos.top) {
   $(''#mainnav'').addClass(''navbar-fixed-top'');
   $(''body'').css(''marginTop'',navheight);
   }
   else {
     $(''#mainnav'').removeClass(''navbar-fixed-top'');
     $(''body'').css(''marginTop'',''0'');
   }
});

Answer 4

Estaba buscando esta misma cosa. Había leído que esto estaba disponible en Bootstrap 3.0, pero no estaba teniendo suerte de implementarlo. Esto es lo que se me ocurrió y funciona genial. Muy simple jQuery y Javascript.

Aquí está el JSFiddle para jugar con ... http://jsfiddle.net/CriddleCraddle/Wj9dD/

La solución es muy similar a otras soluciones en la web y . Si no encuentra útil este, busque lo que necesita. ¡Buena suerte!

Aquí está el HTML ...

<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">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>

Aquí está el CSS ...

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;
}

//the below css are for the links, not needed for sticky nav
.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;
}

Ahora, simplemente agregue el javacript para agregar y eliminar la clase de arreglo en función de la posición de desplazamiento.

$(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $(''#nav_bar'').addClass(''navbar-fixed-top'');
    }

    if ($(window).scrollTop() < 551) {
      $(''#nav_bar'').removeClass(''navbar-fixed-top'');
    }
  });
});

Answer 5

Esto funciono muy bien para mi. No olvides poner un divisor de relleno donde solía estar la barra de navegación o, de lo contrario, el contenido saltará cada vez que sea fijo / no fijo.

function setSkrollr(){
    var objDistance = $navbar.offset().top;
    $(window).scroll(function() {
        var myDistance = $(window).scrollTop();
        if (myDistance > objDistance){
            $navbar.addClass(''navbar-fixed-top'');
        }
        if (objDistance > myDistance){
            $navbar.removeClass(''navbar-fixed-top'');
        }
    });
}

Answer 6

He encontrado que este simple fragmento de JavaScript es muy útil.

$(document).ready(function()
{
    var navbar = $(''#navbar'');

    navbar.after(''<div id="more-div" style="height: '' + navbar.outerHeight(true) + ''px" class="hidden"></div>'');
    var afternavbar = $(''#more-div'');

    var abovenavbar = $(''#above-navbar'');

    $(window).on(''scroll'', function()
    {
        if ($(window).scrollTop() > abovenavbar.height())
        {
            navbar.addClass(''navbar-fixed-top'');
            afternavbar.removeClass(''hidden'');
        }
        else
        {
            navbar.removeClass(''navbar-fixed-top'');
            afternavbar.addClass(''hidden'');
        }
    });
});

Answer 7

Puede usar position: sticky

#navbar {
  position: sticky;
  top: 0px;
}

Sin embargo, el #navbar debería ser un hijo directo del cuerpo.

Answer 8

Utilice Bootstrap Affix:

/* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>

Answer 9

Nota (2015): Tanto la pregunta como la respuesta a continuación se aplican a la antigua versión obsoleta 2.x de Twitter Bootstrap .

Esta característica de hacer y elemento "adhesivo" está incorporada en Twitter Bootstrap y se llama Affix . Todo lo que tienes que hacer es agregar:

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

alrededor de su etiqueta y no olvide cargar los archivos JS de Bootstrap como se describe en el manual . El atributo de datos offset-top indica cuántos píxeles se desplaza la página (desde la parte superior) para arreglar el componente del menú. Por lo general, es solo el espacio al principio de la página.

Nota: Tendrá que ocuparse del espacio faltante cuando se arregle el menú. La reparación significa cortarlo fuera de la capa de la página y pegarlo en una capa diferente que no se desplaza. Estoy haciendo lo siguiente:

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

donde 77px es la altura de mi componente 77px .