How do you do this so that navbar is transparent and then changes color using bootstrap 3. (Affix)

Question

I tried to figure out how to do this for a week, and could not do it. My html navbar looks like this.

<div class="maincontainer">
<!--Navbar-->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header" >
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">Pixoweb</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Example 1</a></li>
                        <li><a href="#">Example 2</a></li>
                        <li><a href="#">Example 3</a></li>
                        <li><a href="#">Example 4</a></li>
                    </ul>
                </li>
                <li><a href="#contact" data-toggle="modal">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Js

    $('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

css

      .affix {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background-color: #957595 !important;
}

Until now, this has made navbar go beyond context and images. I would like someone to help me

Answer 1

Navbar is not behind text / images, it was converted 3d with a boot affix, so it looks like it's behind. I assume that you want to change the background color of the navigator when it is pinned (pinned). You can use the following CSS. Note. You do not need JavaScript.

.affix .navbar-default {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background-color: #957595 !important;
}

.affix {
    width: 100% !important;
}

Answer 2

, , "z-index: 1;" nav. :.navbar-inverse

.navbar-default {
  background-color: #201f1f;
  border-color: #f47d20;
  border-bottom:#f47d20 5px solid;
  padding-bottom:0px;
  z-index: 1;
}