Javascript 为什么我的固定导航栏在向下滚动时变为透明？

我有一个标题，导航栏和封面照片。 每当用户向下滚动时，标题就会被隐藏，导航栏就会保持在顶部，这是我想要的方式。但是，当导航栏经过封面照片时，导航栏会消失，但在经过内容时会出现。 我还设置了一个脚本，如果用户向下滚动，它将使导航栏固定在顶部。如果我删除封面照片html代码，一切正常。 怎么了

下面是我的代码：

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

这是我的导航栏的Javascript

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');
        }
      });

---

添加

背景：白色到
。修复了类

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

我有一个演示给你请看这个


$（窗口）.on（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>150）
{
$（'header'）.addClass（'fixed'）；
//$（'.page header'）.addClass（'hide-header'）；
} 
其他的
{
$（'header'）.removeClass（'fixed'）；
//$（'.page header'）.removeClass（'hide-header'）；
}
});
正文{
浮动：左；
宽度：100%；
垫底：20px；
}
.普通的{
宽度：100%；
浮动：左；
高度：400px；
背景：#000；
边缘顶部：30px；
}
.全体{
浮动：左；
宽度：100%；
}
a{
显示：内联块；
填充：15px；
}
标题{
浮动：左；
宽度：100%；
位置：静态；
排名：0；
左：0；
背景：#fff；
}
.固定{
位置：固定；
排名：0；
背景：#fff；
}
.普通h2{
字体大小：30px；
颜色：#fff；
文本对齐：居中；
垫面：10%；
}

首页
第二页
第三页
第四页
是，默认为透明，但您可以定义任何bg颜色，您可以应用以下内容：-

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

我想这会管用的

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

您应该添加最高的z索引，这样它将覆盖所有元素

例如：

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

添加
背景：白色至
。已修复
classit没有背景它仍然不工作。当我向下滚动时，它仍然不会出现。你能分享你的网站链接吗？我只是在我的wamp服务器上运行此代码。我怎样才能把它分享给你？我已经更新了我的代码，你也可以更新这个代码，然后记住一件事，请删除你的浏览器缓存
header{  
  position: fixed;
  z-index: 10;
  top: 0;
  background: white; 
}