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..

    How can i return a navmenu button to previous style after clicking another button

    How can I show hidden element when it has focus?

    How to link an external stylesheet in CSS

    CSS media queries [how to transform to hyperlinks via media queries]

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to keep the top div height fixed and bottom div height in %age

    How do I change the colours of multiple buttons, each into different ones when hovered?

    How to make a 3D banner overlay (??) with CSS

    How to “zoom”/“scale” in div's content with css or jquery?

    How to make my popup window dead center no matter what width it is

    How to play a second CSS animation once the first one finishes

    How to apply CSS directives to h3 element?

    Box-shadow is not showing or z-index

    How to remove hover function from top row in table

    How to get ID from CSS to Javascript without getElementByID?

    How do you tell which css class to modify?[Example inside]

    how to center a form using css?

    How to Grab an Icon Image

    How to change link color when using jquery mouseover

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?

    How can I stop divs getting pushed down?

    How to set different css attributes with JQuery?

    How would I do a two finger drag with javascript/jquery?

    how can you have layers see through each other on a web page

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to move a table(or other content) next to vertical navigation bar

    how to use 'selector gadget' to scrape data into R?

    How to get an interactive geographic map for a country? [closed]

    How do I do the css for this?

    How to keep indent in lists with CSS?