How to change navbar background color after page has scrolled down


Tags: html,css,twitter-bootstrap

Problem :

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 :

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;

}


Solution :

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.

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

    CSS Howto..

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to vertically center image and text in a block element? [CSS]

    How to set a image/icon width that was specified through css content property?

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    Showing images conditionally

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    How can I vertically align two floated divs?

    css: How to horizontal align fonts with different sizes

    how to trigger “onMouseOut” from click

    how does CSS determine which way to animate a transition?

    how to add same width on bootstrap dropdown menu item as parent item

    How to include css files in JSP page struts2?

    How to Set an if in css for opera browser? [duplicate]

    How to use horizontal scroll when you have way many columns

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?

    How to apply css style to custom attributes

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    how to make animate.css(plugin) work instantly on live site load?

    how to let dropdown menu align-right?

    How to stretch div height to fill parent div - CSS

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to re-use common css rules in css( sass ) [closed]

    How to align divs side by side without one being slightly lower?

    How to create CSS3 bounce effect

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    CSS puzzle: How to add background-image and set height/width on empty span?

    how to hidden image over image in css

    How to join multiple rounded images one by one using line in css or css3

    How to refresh to top of HTML page using css

    How to load up CSS files using Javascript?