[英]Why is my fixed navbar becomes transparent on scroll down?
我有标题、导航栏和封面照片。 每当用户向下滚动时,标题就会隐藏而导航栏保持在顶部,就像我想要的那样。 但是,当导航栏经过封面照片时,导航栏会消失,但当它经过内容时会出现。 我还设置了一个脚本,如果用户向下滚动,它将使导航栏固定在顶部。 如果我删除封面照片 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>
这是我的外部样式表。
/* 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; }
}
这是我的导航栏的 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');
}
});
添加background:white;
到.fixed
类
.fixed {
position:fixed;
top:0;
left:0;
right:0;
width:100%;
z-index:99;
background:white;
}
我有一个演示给你请看这个
$(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>
是的,默认情况下它是透明的,但您可以定义任何 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-index,以便它覆盖每个元素,
例如:
header{
position: fixed;
z-index: 10;
top: 0;
background: white;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.