2

I'm working on a project where I would like the bootstrap nav bar to appear transparent until you start scrolling then a black bar will replace the transparent bar. I know that there are similar tutorials out there. But I want to work with the one I started creating. However, I am just not sure how to target it correctly, and what css properties I need for the effect I want. Thanks in advance!

Sorry fixed. Want it from clear bar to black bar on scroll.

https://jsfiddle.net/qbhx8jke/

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-   toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">JO Project</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#part1">Part 1</a></li>
        <li><a href="#part2">Part 2</a></li>
        <li><a href="#part3">Part 3</a></li>
        <li><a href="#part4">Part 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Jquery:

<script>
$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"transparent"});   
    }
})

})

dancemc15
  • 598
  • 2
  • 7
  • 21
  • $(".navbar").removeClass("navbar-inverse"); add this line before .css in jquery and $(".navbar").css("background-color","transparent"); – Jasjeet Singh Dec 15 '16 at 05:27
  • Possible duplicate of [Set Bootstrap navbar transparency on scroll](http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll) – vanburen Dec 15 '16 at 05:38

1 Answers1

0

In bootstrap if u use class .navbar-inverse the background color cannot be changed. so use .navbar-default. try with bellow code it may be helpful

$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"black"});   
      $(".navbar-default").css({"background-color":"black;","border-color":"black"})
    }
});
});
.navbar{
  background-color: transparent;
  }
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
Vaibhav Shettar
  • 790
  • 2
  • 9
  • 20
  • Sorry. I just edited my question. I'm looking to set my nav bar transparent and then on scroll turn to black. – dancemc15 Dec 15 '16 at 05:50
  • Thanks for helping me fix my code. However, right now at the very top before you start scrolling the default nav bar is white rather than the color of my background image (so not completely transparent). Do you have any idea why? – dancemc15 Dec 15 '16 at 06:03
  • .jumbotron{ background: url(../images/banner_final2.JPG) no-repeat center center fixed; height:700px; font-family: 'Roboto Slab', serif; color:black; } – dancemc15 Dec 15 '16 at 06:03
  • ^CSS for full-width background image – dancemc15 Dec 15 '16 at 06:04