Barre de navigation fixe Bootstrap avec logo rétractable, au-dessus de la barre de navigation

Question

Comment utiliser une barre de navigation fixe avec logo parent avec bootstrap. Le logo diminue ensuite lorsque vous faites défiler, mais reste visible avec la barre de navigation fixe.

Par exemple, pour le logo et le rétrécissement navbar: https://doemee.zoetermeer.nl

Answer 1

Vous pouvez le faire en utilisant la classe bootstrap navbar-fixed-top sur la nav et en ajoutant peu jQuery pour déclencher window événement de défilement. Lorsque vous faites défiler vers le bas ou faites défiler vers le haut, il vous suffit de basculer une classe CSS.

Démo: See here

$(document).ready(function() { 
 
     $(window).scroll(function() { 
 

 
      //Method 1: Using addClass and removeClass 
 
      //if ($(document).scrollTop() > 50) { 
 
      // $('.navbar-default').addClass('navbar-shrink'); 
 
      //} else { 
 
      // $('.navbar-default').removeClass('navbar-shrink'); 
 
      //} 
 

 
      //Method 2: Using toggleClass 
 
      $(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50) 
 
     }); 
 
    });

@media screen and (min-width: 992px) { 
 

 
     .navbar-default { 
 
      padding: 30px 0; 
 
      transition: padding 0.3s; 
 
     } 
 

 
      .navbar-default.navbar-shrink { 
 
       padding: 10px 0; 
 
      } 
 
    } 
 

 
    .navbar-default a { 
 
     color: #4D4D4D; 
 
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 
     text-transform: uppercase; 
 
     text-decoration: none; 
 
     line-height: 42px; 
 
     font-weight: 700; 
 
     font-size: 20px; 
 
    } 
 

 
    .navbar-default a.brand > img {    
 
     max-width: 70px; 
 
    } 
 

 
     .navbar-default a.active { 
 
      color: #2dbccb; 
 
     } 
 

 

 
    .content { 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 

 
     .content > section { 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 

 
    #portfolio { 
 
     background: #2dbccb; 
 
    } 
 

 
    #about { 
 
     background-color: #eb7e7f; 
 
    } 
 

 
    #contact { 
 
     background-color: #415c71; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Navigation --> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header page-scroll"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="brand" href="http://trungk18.github.io/"><img src="trungk18.png" class="img-responsive" title="trungk18" /></a> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="top-nav"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="page-scroll"> 
 
         <a href="#portfolio">Portfolio</a> 
 
        </li> 
 
        <li class="page-scroll"> 
 
         <a href="#about">About</a> 
 
        </li> 
 
        <li class="page-scroll"> 
 
         <a href="#contact">Contact</a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav> 
 

 
    <!-- Content Section --> 
 
    <div class="content"> 
 
     <section id="portfolio"></section> 
 
     <section id="about"></section> 
 
     <section id="contact"></section> 
 
    </div>