我第一次尝试从头开始构建页面,而不是使用模板。我想在导航栏上方有一个固定的顶部栏。像这样:https://inspirothemes.com/polo/header-topbar-transparent.html
这是我现在的代码:
window.onscroll = function() {
scrollFunction();
};
var first = true;
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navbar").classList.add('fixed-navbar');
} else {
document.getElementById("navbar").classList.remove('fixed-navbar');
}
}
.navbar {
position: absolute !important;
width: 100%;
transition: all .5s;
}
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
.nav-item a {
text-decoration: none;
outline: none;
color: #ffffff;
opacity: 1;
font-weight: 600;
font-size: .85em;
}
.nav-item a:hover {
opacity: 0.5;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.hero {
width: 100%;
height: 90vh;
background: url('https://loremflickr.com/1024/768');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.fixed-navbar {
background: white;
top: 0;
position: fixed !important;
animation-name: fixedAnim;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
/*-1px 6px 13px 0px rgba(0, 0, 0, 0.44);*/
}
.fixed-navbar a {
color: #000;
}
.navbar.fixed-navbar .navbar-collapse {
background: #fff !important;
}
.navbar.fixed-navbar .navbar-toggler span {
background: #000 !important;
}
.navbar.fixed-navbar .logo-dark {
display: inline-block !important;
}
.navbar.fixed-navbar .logo-light {
display: none !important;
}
@keyframes fixedAnim {
from {
top: -50px;
}
to {
top: 0;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav id="navbar" class="navbar navbar-expand-sm">
<a class="navbar-brand ml-4" href="#">
<img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-inline-block align-top logo-light" id="navlogo">
<img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-none align-top logo-dark" id="navlogo">
</a>
<button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span> </span>
<span> </span>
<span> </span>
</button>
<div class="navbar-collapse collapse text-right" id="navbarsExample04">
<ul class="navbar-nav ml-auto mr-4 text-uppercase">
<li class="nav-item active">
<a class="nav-link" href="#">one</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">two</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">three</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">four</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">five</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<section class="hero">
<div class="container-fluid">
</div>
</section>
<div class="background-white">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs »</a>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
如何制作一个关于导航的顶部栏,其作用类似于提供的示例中的导航栏?我想尽可能多地使用 Bootstrap。
编辑:
如果我将其添加到导航栏上方,则它不透明。如果我将它添加到导航栏中,它不会消失:
<div class="d-block">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="top-menu">
<li><a href="#"><i class="fa fa-phone"></i> Phone</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> Email</a></li>
</ul>
</div>
<div class="col-md-6 d-none d-md-block">
<li><a href="#"><i class="fa fa-phone"></i> Phone</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> Email</a></li>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
我为您创建了演示,您可以在下面的链接中查看。 https://codepen.io/shabbirvaghela/pen/OJbEeEp
更新后的代码如下,我们需要为顶部栏排第一行,为菜单列表排第二行,如代码所示。
header {
position: absolute !important;
width: 100%;
transition: all 0.5s;
}
.top-bar {
padding: 15px;
color: #fff;
}
.navbar {
transition: 0.3s all;
}
header {
position: absolute !important;
width: 100%;
transition: all 0.5s;
}
.top-bar {
padding: 15px;
color: #fff;
}
.navbar {
transition: 0.3s all;
}
<header>
<div class="top-bar">
top bar details here
</div>
<nav id="navbar" class="navbar navbar-expand-sm">
<a class="navbar-brand ml-4" href="#">
<img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-inline-block align-top logo-light" id="navlogo">
<img src="http://via.placeholder.com/30x30" alt="" width="30" height="90" class="d-none align-top logo-dark" id="navlogo">
</a>
<button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span> </span>
<span> </span>
<span> </span>
</button>
<div class="navbar-collapse collapse text-right" id="navbarsExample04">
<ul class="navbar-nav ml-auto mr-4 text-uppercase">
<li class="nav-item active">
<a class="nav-link" href="#">one</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">two</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">three</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">four</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">five</a>
</li>
</ul>
</div>
</nav>
</header>