change color navbar after scroll

Question

i want to change the color of my navbar when i scroll. When the navbar is on top the background is transparent. thank\'s to all for the attention and excuse me for my bad en

Answer 1

Use the Bootstrap Affix component to watch the scroll position instead of extra jQuery/JavaScript. Just define the .affix-top and .affix CSS for the navbar.

   /* navbar style once affixed to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

and set the position you want the navbar to change style (ie; 400px from the top)

Working Demo: http://www.codeply.com/go/xp2fY6sVHP

---

For Bootstrap 4, see: Animate/Shrink NavBar on scroll using Bootstrap 4