如何在页面向下滚动后更改导航栏背景颜色

I have a fixed navbar on a bootstrap project and on the landing page of the website, I have made the background of the navbar transparent. When the website scrolls down, I want the navbar background to change back to black. I am using bootstrap. An example of what I want can be seen in the nabber at :

我在引导项目上有一个固定的导航栏,在网站的登陆页面上,我已经使导航栏的背景透明。当网站向下滚动时,我希望导航栏背景变回黑色。我正在使用bootstrap。我想要的一个例子可以在nabber中看到:

http://ironsummitmedia.github.io/startbootstrap-agency/

I am a new coder, so I apologize for any mistakes in the code formatting.

我是一个新的编码器,所以我为代码格式中的任何错误道歉。

HTML:

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Youth  |  Society</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="design.css" rel="stylesheet">

    <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    </head>


<body>
    <header>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">

          <a href="#" class="navbar-brand"><img src="1.png"></a>
          </div>


          <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>


          </button>

          <div class="collapse navbar-collapse navHeaderCollapse">

              <ul class="nav navbar-nav navbar-right">

          <li><a href="#">Home</a></li>
          <li><a href="#">Who are we</a></li>
          <li><a href="#">Volunteer</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

          </div>
         </div>
    </div>
        </header>


    <div class="page1"> 
    <div class="landing">
      <div class="container">
        <h1>Peel's YES</h1>
        <p>Welcome To Peel's Youth Engagement Society</p>
      </div>
<div class="topics">
      <div>
        <div class="row">
          <div class="col-md-4">
            <h3>Learn</h3>
            <p>Get to know more about YES, who we are, and what we do.</p>

          </div>
          <div class="col-md-4">
            <h3>Volunteer</h3>
            <p>Find out how you can get involved! YES strives to prove YOUth with unique opportunities and experiences.</p>

          </div>
          <div class="col-md-4">
            <h3>Educate</h3>
            <p>Read about the themes that YES has supported in the past</p>

          </div>
        </div>
      </div>
    </div>
    </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

</body>

</DOCTYPE>

CSS:

.navbar-header {
    display: inline;
}

.navbar{
    background: transparent;
    background-color: transparent;
    border-color: transparent;
}

@media screen and (max-width: 767px) {
    .navbar {
        background-color: black;

    }
}


.navbar-toggle{
    margin-top: -50px;


}

.navbar .nav > li > a {
    color:  black;
}

@media screen and (max-width: 767px) {
    .navbar .nav > li > a {
        color:white;

    }
}
.navbar {

    padding-top:15px;
    padding-bottom: 5px;

}

@media screen and (max-width: 767px) {
    .navbar {
        padding-top:0px;
        padding-bottom: 0px;

    }
}

.navbar a {

  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;  
}

.navbar li{

    font-family: 'Lato', sans-serif;
    display: inline;

}

.navbar img {
    max-height: 50px;
    margin-top: -20px;

}


/*      P A G E  1      */




.landing {
    padding-top:140px;
    background-image:url(mainpage1.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 760px;
}

.landing h1 {
    text-align: center;
  color: #000;
  font-size: 70px;  
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}

.landing p {
    text-align: center;
  font-size: 20px;
  color: #000;
    font-family: 'Lato', sans-serif;
}
.topics{

    background: #eeeeee;
    padding-right:40px;
    margin-top: 340px;
    text-align: center;
}

.topics h3{
    font-size: 18px;
}

.topics p{
    font-size: 18px;
}


/*      P A G E  2      */


.page2 {
    height:760px;

}

.page2 h3{
    text-align: left;
    margin-top: 100px;

}

2 个解决方案

#1

Here is a Fiddle to view.

这是一个小提琴。

I made a change the have the shade color of the nav also show in smaller screens if this helps you.

我做了一个改变,如果这有助于你,导航的阴影颜色也会在较小的屏幕中显示。

If you come across this post and view the Fiddle, make sure you make the view frame lager.

如果您遇到此帖并查看小提琴,请确保使视图框架更大。

This navbar effect is for large screens. (768 px Plus) Large view FIDDLE here.

此导航栏效果适用于大屏幕。 (768 px Plus)大视图FIDDLE在这里。

You can change when the effect happens as you scroll from the top here.

当您从此处顶部滚动时,您可以更改效果何时发生。

var docElem = document.documentElement,
    header = document.querySelector( '.navbar-default' ),
    didScroll = false,
    changeHeaderOn = 200;

The background color is changed by this here

这里改变了背景颜色

.navbar-default.navbar-shrink {
padding: 10px 0;
background-color: #222567;
background: rgba(70,10,200,0.9);

And the background color is first set by this here.

并且这里首先设置背景颜色。

@media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
/*  background-color: transparent; */
background: rgba(70,10,200,0.4);
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}

#2

There are many scripts out there for animating things on scroll. Honestly, it really depends on that you want to do. Here is a jQuery script that shows the basics. It simply adds a class to navbar (or whatever you want) once the visitor has scroll past a certain point. On the class, in this case shrink, I usually add transition easing to the class which makes things transition nicely when adding/removing the class.

有很多脚本用于在滚动上制作动画。老实说,这真的取决于你想做什么。这是一个显示基础知识的jQuery脚本。一旦访问者滚过某个点,它就会向导航栏(或任何你想要的东西)添加一个类。在类中,在这种情况下缩小,我通常会将转换缓动添加到类中,这使得在添加/删除类时可以很好地转换。

$(window).scroll(function() {
    if ($(this).scrollTop() > 200){ // Set position from top to add class
        $('.navbar').addClass("shrink");
    } else {
        $('.navbar').removeClass("shrink");
    }
});

#1