Collant NavBar onScroll?

Je suis actuellement en train de construire un site pour moi, et j'ai trouvé cela vraiment génial d'effet sur plusieurs sites, où la barre de navigation ci-dessous est une image, mais lorsque vous faites défiler devant lui, il colle à la partie supérieure.

Exemple

Comment puis-je y parvenir? Aussi, comment puis-je obtenir un effet similaire à celui de ce site web avec une même barre de navigation de style?

L'utilisation de javascript pour vérifier la position de défilement et de positionnement css. Une fois que l'utilisateur fait défiler passé à ou au-delà du point où vous souhaitez que la barre de navigation pour coller au-dessus, vous pouvez la position de la barre de navigation à l'aide de css position: fixed;

OriginalL'auteur Kevin Haube | 2014-03-20

  1. 10

    Voici ce que @Matthieu parlait:

    Vérifier ce violon http://jsfiddle.net/luckmattos/yp8HK/1/

    JQUERY

    var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

    Espérons que cela aide, j'ai utilisé bootstrap navbar.

    Merci!!!! C'est parfait!
    Note de côté; assurez-vous de vérifier les navigateurs prennent en charge position:fixed: caniuse.com/#feat=css-fixed

    OriginalL'auteur Mattos

  2. 0

    Voici quelques exemples

    Avec bootstrap, vous pouvez utiliser navbar-fixed-top classe. 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

    Avoir un regard sur les liens suivants:

    Fixe en Haut de page : http://getbootstrap.com/components/#navbar-fixed-top

    Fixe Navbar exemple : http://getbootstrap.com/examples/navbar-fixed-top/

    OriginalL'auteur Santosh Joshi

  3. 0

    Voici un Bootstrap exemple qui s'attache à la barre de navigation en haut une fois que l'utilisateur est déjà passé à la tête de haut..

    http://www.bootply.com/121595

    Voici un autre exemple qui anime la fixation de la barre de navigation à l'aide de CSS transition

    http://www.bootstrapzero.com/bootstrap-template/the-firm

    Merci beaucoup pour les liens! (: J'adore l'animé! Je vais devoir jeter que dans mon site!

    OriginalL'auteur Zim

  4. 0

    Ici est un RÉEL exemple rapide j'ai jeté avec jquery et quelques très simple css.

    JS

    $(window).on('scroll', function(){
    if($(window).scrollTop()>=95 && !$('nav').hasClass('fixed')){
        $('nav').addClass('fixed'); 
    }
    else if($(window).scrollTop()<95 && $('nav').hasClass('fixed')){
       $('nav').removeClass('fixed') 
    }
});

    CSS

    .container {
  height: 1800px;
}

.header {
  text-align: center;
}

nav {
  background-color: #efefef;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  padding: 15px;
  width: 100%;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

    HTML

    <div class="container">
<div class="header">
  <img src="http://www.placehold.it/500x85" alt="" />
<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>
</div>
    Merci man! Ce fut une grande!

    OriginalL'auteur Matthew Nie

  5. 0

    Voici un exemple de collant de navigation de la barre de Défilement de la dynamique de la hauteur se

    JS

    Vous devez ajouter une Bibliothèque jQuery fichier.

    Ici est le violon lien-
    https://jsfiddle.net/CV_pawan/4nr4codq/1/

    $(document).ready(function(){
  var num = $(".header-class").offset().top; 
  $(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) {  
      $('.header-class').addClass('fixed');  
    } 
    else {  
     $('.header-class').removeClass('fixed');    
    } 
  });
});

    CSS

    body {
  margin: 0px;
  padding: 0px;
}

.nav-bar-white {
  background-color: #125456;
  width: 100%;
}

.active-2 {
  float: right;
  width: 49%;
  text-align: right;
}

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

h3 {
  color: #fff;
}

.first {
  background: #000;
  width: 49%;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  border: 1px solid #fff;
}

.first p {
  color: #fff;
}

.second {
  background: #000;
  width: 49%;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  border: 1px solid #fff;
}

.second p {
  color: #fff;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #300E06;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #000;
}

    HTML

    <ul class="nav-bar-white">
<li class="active-1"><a href="#home">Company Logo</a></li>
</ul>
<ul class="header-class">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div>
<div class="first">
<h3>
What is Lorem Ipsum?
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
<div class="second">
<h3>
What is Lorem Ipsum?
</h3>
<p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
</div>
<div class="first">
<h3>
What is Lorem Ipsum?
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
<div class="second">
<h3>
What is Lorem Ipsum?
</h3>
<p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
</div>

    OriginalL'auteur Pawan Singh Bisht