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

时间：2016-03-27 11:38:55

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

Something like this website

这就是我想要实现的目标：

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

    3. 我对此做了很多研究，但没有任何帮助。我已经尝试了附加插件和jQuery，但发现它们非常令人困惑。我是jQuery的新手，发现它有点难以理解和实现:(

    ＆＃13;
    ＆＃13; 
    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;
  }
}
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

3 个答案:

答案 0 :(得分：10)

在这里： 

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

<强> Working Demo

答案 1 :(得分：5)

您可以根据滚动条的位置在导航中添加或删除.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/

答案 2 :(得分：3)

当<table class="table table-bordered"> <tr> <td> <input type="checkbox" id="box1" name="box1"> <b>Seleziona tutto</b></td> <td> <b>Pratica</b> </td> <td> <b>Filiale</b> </td> </tr> <?php $query = mysql_query("SELECT * from plprat ") ; while ($row = mysql_fetch_array($query)) { echo "<tr>"; echo "<td><input type='checkbox' class='box' name='box[]' value=".$row['id']."></td>"; echo "<td>" . $row['pratica'] . "</td>"; echo "<td>" . $row['filiale'] . "</td>"; //echo "<td><form method='POST' action='Cancella.php'><button type='submit' name='Cancella' class='btn btn-default' value=".$row['id'].">Cancella</button></form></td>"; echo "<td><form method='GET'><button type='button' id='modifica' name='modifica' data-toggle='modal' data-target='#myModal' class='btn btn-default' value=".$row['id'].">Modifica</button></form></td>"; echo "</tr>"; } ?> </table> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modifica dati</h4> </div> <div class="modal-body"> <?php $id = $_GET['modifica']; echo $id; $query = mysql_query("SELECT * FROM plprat WHERE id = $id"); while ($row = mysql_fetch_array($query)) { ?> <b>Pratica</b> <input type="text" id="pratica" name="pratica" value="<?php echo $row['pratica']; ?>"> <b>Filiale</b> <input type="text" id="filiale" name="filiale" value="<?php echo $row['filiale']; ?>"> <?php } ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button> <button type="submit" id="salva" name="salva" class="btn btn-primary">Modifica</button> </div> </div> </div> </div> 检查$(window).scroll是否大于$(window).scrollTop()时。如果是，请添加类50px，如果没有，则将其删除。

添加样式

.trans

给你的css。

您的工作代码： 

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

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

相关问题
最新问题