gpt4 book ai didi

javascript - 为什么我的固定导航栏在向下滚动时变得透明?

转载 作者:行者123 更新时间:2023-11-28 02:38:25 26 4
gpt4 key购买 nike

我有标题、导航栏和封面照片。每当用户向下滚动时,标题就会隐藏起来,导航栏会保持在顶部,就像我想要的那样。但是,当导航栏经过封面照片时,导航栏会消失,但在经过内容时会出现。我还设置了一个脚本,如果用户向下滚动,它将使导航栏固定在顶部。如果我删除封面照片 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>

关于javascript - 为什么我的固定导航栏在向下滚动时变得透明?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45749119/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com