web-dev-qa-db-fra.com

comment rendre une barre de navigation transparente visible lors du défilement

Quelque chose comme ce site Web

Voici ce que j'essaie de réaliser:

  1. La barre de navigation est transparente en haut de la page et
  2. Lors du défilement, il passe de transparent à une couleur spécifique.

J'ai fait beaucoup de recherches à ce sujet mais rien n'y fait. J'ai essayé le plugin d'affixe et jQuery mais je les ai trouvés très déroutants. Je suis nouveau sur jQuery et le trouve un peu difficile à comprendre et à mettre en œuvre :(

html, body {
  margin:0; 
  padding:0;
}

body {
  position:relative;
  height:200px;
}

.nav {
  margin:0px;   
}

.navbar{
  background:transparent;
  background-color:transparent;
  border-color:transparent;
  margin-bottom:0px;
  font-family: 'Droid Serif', serif;
  font-size:20px;
}

.navbar-brand {
  font-size:20px;
  font-family: 'Droid Serif', serif;
}

header {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url("work.jpg");
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

header .intro-text {
  padding-top: 100px;
  padding-bottom: 50px;
}

header .intro-text .intro-heading {
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}

@media(min-width:768px) {
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
  }

  header .intro-text .intro-heading {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
  }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
    <!-- Custom CSS -->
    <link href="css.css" rel="stylesheet" type='text/css'>
    <!--font family-->
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    <!--Navigation-->      
    <nav class="navbar navbar-inverse  navbar-fixed-top" >
      <div class="conatiner-fluid">
        <!--page scroll button for -->
        <div class="navbar-header" role="navigation">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                  
          </button>
          <a class="navbar-brand" href="#">Website</a>
        </div>    <!--page scroll button-->
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li ><a href="#">Home</a></li>
              <li ><a href="#about">About</a></li> 
              <li ><a href="#services">Services</a></li>
              <li ><a href="#contact">Contact</a></li>
            </ul>
          </div> <!--ul-li-->
        </div> <!--navbar collapse-->
      </div> <!--container-fluid-->
    </nav>
    <!--Navigation-->
    <!--Header-->
    <header>
      <div class="container" >
        <div class="intro-text">
          <!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
          <div class="intro-heading">You have landed our page!</div>
          <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
        </div>
      </div>
    </header>
    <!--Header-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  </body>
</html>
jqueryhtmlcsstwitter-bootstrap-3navbar
9
Learner

Et voilà: 

$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background','red');
} else {
$('.navbar').css('background','transparent');
}
});

Démo de travail

10
Pedram

Vous pouvez ajouter ou supprimer un .transparent classe à la nav selon la position de la barre de défilement.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
});

et CSS:

nav.navbar{
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

nav.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

nav.navbar.transparent {
  background-color:rgba(0,0,0,0);
}

Voici la solution avec votre code: http://jsfiddle.net/m7yww8oa/157/

5
Kaan Burak Sener

Lorsque $(window).scroll vérifiez si $(window).scrollTop() supérieur à 50px. Si oui, ajoutez la classe .trans et le supprimer si ce n'est pas le cas.

Ajoutez le style

.navbar.trans {
   background:transparent !important;   
}

À votre CSS.

Votre code de travail:

$(window).scroll(function() {
  var offset = $(window).scrollTop();
  console.log(offset);
  $('.navbar').toggleClass('trans', offset > 50);
});
html, body {
  margin:0; 
  padding:0;
}

body {
  position:relative;
  height:200px;
}

.nav {
  margin:0px;   
}

.navbar{
  background:transparent;
  background-color:transparent;
  border-color:transparent;
  margin-bottom:0px;
  font-family: 'Droid Serif', serif;
  font-size:20px;
}

.navbar-brand {
  font-size:20px;
  font-family: 'Droid Serif', serif;
}

header {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url("work.jpg");
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

header .intro-text {
  padding-top: 100px;
  padding-bottom: 50px;
}

header .intro-text .intro-heading {
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}

@media(min-width:768px) {
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
  }

  header .intro-text .intro-heading {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
  }
}

.navbar.trans {
  background:transparent !important;  
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
    <!-- Custom CSS -->
    <link href="css.css" rel="stylesheet" type='text/css'>
    <!--font family-->
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    <!--Navigation-->      
    <nav class="navbar navbar-inverse  navbar-fixed-top" >
      <div class="conatiner-fluid">
        <!--page scroll button for -->
        <div class="navbar-header" role="navigation">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                  
          </button>
          <a class="navbar-brand" href="#">Website</a>
        </div>    <!--page scroll button-->
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li ><a href="#">Home</a></li>
              <li ><a href="#about">About</a></li> 
              <li ><a href="#services">Services</a></li>
              <li ><a href="#contact">Contact</a></li>
            </ul>
          </div> <!--ul-li-->
        </div> <!--navbar collapse-->
      </div> <!--container-fluid-->
    </nav>
    <!--Navigation-->
    <!--Header-->
    <header>
      <div class="container" >
        <div class="intro-text">
          <!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
          <div class="intro-heading">You have landed our page!</div>
          <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
        </div>
      </div>
    </header>
    <!--Header-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  </body>
</html>
3
Mosh Feu