Why is my fixed navbar becomes transparent on scroll down?

Question

I have the a header, navbar and a cover photo. Whenever the user scrolls down, the header becomes hidden and the navbar stays at the top, the way i wanted it to be. However, when the navbar passes by the cover photo the navbar becomes will be disappears but then it appears when it passes the content. I have also set a script that will make the navbar fixed on top if the user scrolls down. Everything is working fine if i remove the cover photo html code. What is wrong with it?

Below is my code:

<!--HEADER -->
<div class="header-page">
            <a class="navbar-header" href="#">
                <img src="images/logo/logo.png" width="300px" height="150px" />
            </a>
            <a href="" class="navbar-header-text">Login</a> |
            <a href="" class="navbar-header-text">Create an account</a>
        </div>

<!--NAVBAR -->
<div class="menu">
            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                  </button>
                  <a class="navbar-brand" href="#">LOGO</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </div>
              </div>
            </nav>
        </div>

<!--COVER PHOTO-->
<div class="start-page parallax-background" id="home">
                <div class="opacity"></div>
                <div class="content">
                    <div class="arrow-down"></div>
                </div>
        </div>

<!--CONTENT-->
<div class="container">
            <p> example sentences</p>
</div>

This is my external style sheet.

/* NAVIGATION BAR */

.menu {
    position:absolute;
    width:100%;
    margin:0;
    height: 50px;
}

.navbar {
    color:red;
    border:none;
    border-radius:0;
    margin-top:0;

}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  background: white;
}

.navbar .navbar-collapse {
  text-align: center;
  background: white;
}

.fixed {
    position:fixed;
    top:0;
}

.hide-header {
    display: none;
}


/* COVER PAGE */

.start-page
{
  position:relative;
  width:100%;
  height:500px;
  background:url(../images/cover/cover3.jpg) 0px 0px fixed;
}

.opacity
{
  position:absolute;
  width:100%;
  height:500px;
  background:rgba(0,0,0,0.7);
}


.arrow-down 
{
  position: absolute;
  bottom: 110px;
  left: 50%;
  margin-left: -10px;
  width: 21px;
  height: 29px;
  background: url(../images/icons/arrow-down.png) no-repeat center center;
  display: block;
  -webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */
  -moz-animation:    bounce-fade 1.2s infinite; /* Fx 5+ */
  -o-animation:      bounce-fade 1.2s infinite; /* Opera 12+ */
   animation:        bounce-fade 1.2s infinite; /* IE 10+ */
}


@-webkit-keyframes bounce-fade 
{
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}
@-moz-keyframes bounce-fade 
{
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}
@-o-keyframes bounce-fade 
{
    0%   { opacity: 0; bottom:70px; }
    100% { opacity: 1; bottom: 35px; }
}
@keyframes bounce-fade 
{
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}

This is my Javascript for my navbar.

var num = 150;

      $(window).bind('scroll', function () 
      {
        if ($(window).scrollTop() > num) 
        {
          $('.menu').addClass('fixed');
          //$('.page-header').addClass('hide-header');
        } 
        else 
        {
          $('.menu').removeClass('fixed');
          //$('.page-header').removeClass('hide-header');
        }
      });

Answer 1

you should add the highest z-index so it will be ove every element,

For exemple:

header{  
  position: fixed;
  z-index: 10;
  top: 0;
  background: white; 
}

Answer 2

Add background:white; to .fixed class like

.fixed {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:99;
  background:white;
}

i have a demo for you please look at this

$(window).on('scroll', function ()  {
	
        if ($(window).scrollTop() > 150) 
        {
          $('header').addClass('fixed');
          //$('.page-header').addClass('hide-header');
        } 
        else 
        {
          $('header').removeClass('fixed');
          //$('.page-header').removeClass('hide-header');
        }
      });

body {
  float: left;
  width: 100%;
  padding-bottom: 20px;
 
}
.common {
	width: 100%;
	float: left;
	height: 400px;
	background: #000;
	margin-top: 30px;
}
.allbody {
	float: left;
	width: 100%;
}

a {
	display: inline-block;
	padding: 15px;
}
header {
	float: left;
	width: 100%;
	position: static;
	top: 0;
	left: 0;
	background: #fff;
}
	.fixed {
		position: fixed;
		top: 0;
		background: #fff;
	}
.common h2 {
	font-size: 30px;
	color: #fff;
	text-align: center;
	padding-top: 10%;
}

<header>
	<a href="#firstDestination" data-anchor="firstDestination">first page</a>
	<a href="#secondDestination" data-anchor="secondDestination">second page</a>
	<a href="#thirdDestination" data-anchor="thirdDestination">third page</a>
	<a href="#fourthDestination" data-anchor="fourthDestination">fourth page</a>
</header>


<div class="allbody">
	<div class="common" id="firstDestination" ><h2>First Page</h2></div>
	<div class="common" id="secondDestination"><h2>Second Page</h2></div>
	<div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
	<div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div> 

</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 3

I think this will work.

.fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:99;
}

Answer 4

Yes its by default transparent but you can define any bg color,you can apply this :-

.fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:rgba(255,255,255,0.9);
 }