web-dev-qa-db-ja.com

スクロール時に透明なナビゲーションバーを表示する方法

このウェブサイトのようなもの

これは私が達成しようとしていることです：

  1. ナビゲーションバーはページの上部で透明であり、
  2. スクロールすると、透明から特定の色に変わります。

私はこれについて多くの研究をしましたが、何の助けにもなりませんでした。私は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>
jqueryhtmlcsstwitter-bootstrap-3navbar
9
Learner

ここに行きます：

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

実用的なデモ

10
Pedram

スクロールバーの位置に応じて、.transparentクラスをnavに追加または削除できます。

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

5
Kaan Burak Sener

$(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>
3
Mosh Feu