滚动时如何使透明导航栏可见答案

【问题标题】：how to make a transparent navbar visible when scrolling滚动时如何使透明导航栏可见
【发布时间】：2016-07-14 19:11:26
【问题描述】：

Something like this website

这就是我想要达到的目标：

导航栏在页面顶部是透明的，并且
滚动时，它会从透明变为特定颜色。

我对此进行了大量研究，但没有任何帮助。我尝试过 affix 插件和 jQuery，但发现它们非常混乱。我是 jQuery 新手，发现它有点难以理解和实现:(

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>

【问题讨论】：

“透明”是什么意思？

标签： jquery html css twitter-bootstrap-3 navbar

【解决方案1】：

给你：

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

Working Demo

【讨论】：

【解决方案2】：

您可以根据滚动条的位置在nav中添加或删除.transparent类。

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

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

这是您的代码的解决方案：http://jsfiddle.net/m7yww8oa/157/

【讨论】：

【解决方案3】：

当$(window).scroll 检查$(window).scrollTop() 是否大于50px。如果是，请添加类 .trans，如果没有，则将其删除。

添加样式

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

到你的CSS。

您的工作代码：

$(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>

【讨论】：