将 Bootstrap 导航栏固定到屏幕顶部
[英]Pinning a Bootstrap Navbar to the Top of the Screen
问题描述
如何将 Bootstrap 导航栏固定到屏幕顶部？ 我试过导入 JS 代码，但它似乎不起作用，最糟糕的是，它在实现时试图粘在顶部会出现故障，但是当你向下滚动时，它实际上不是一个粘性导航栏。 有没有实用的方法来解决这个问题？
此外，当您更改尺寸以使其更小时，导航栏将进入汉堡布局。 然后，当您将鼠标悬停在它上面时，汉堡包按钮图标上方会出现一个深黑色阴影/背景。 我们怎样才能摆脱它？ 如果有人对导航栏有专业知识，那将不胜感激。
编辑：两个问题都已解决。 我确实有一个关于制作它的问题，以便当用户向下滚动时，导航栏不会在图像下方通过，如此处所示。
这是 HTML 代码：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="fusebloomLogo.png" sizes="32x32" type="image/png">
<!-- import Lora font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<!-- import Poppins font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap" rel="stylesheet">
<!-- import Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<nav id="navbar_top" class="navbar navbar-light bg-white navbar-inverse">
<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="#">WebSiteName</a> -->
<a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#process">Process</a>
</li>
</ul>
</div>
</div>
</nav>
这是CSS代码：
html {
scroll-behavior: smooth;
}
nav {
font-family: 'Poppins', sans-serif;
position: sticky;
border: 0;
}
.nav-link {
margin-top: 0em;
margin-left: 1.5em;
font-size: 1.2em;
}
@media screen and (min-width: 768px) {
.nav-link {
margin-top: 1.0em;
margin-left: 1.5em;
font-size: 1.2em;
}
}
/* Goal: Change the anchor links to color of black, the active or hovering anchor links to color of grey, and erase the black rectangle around active links */
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
color: black;
}
.navbar-light .nav-item .nav-link:focus {
background-color: white;
}
.icon-bar {
background-color:#000000 !important;
border: 0;
}
.navbar-light {
background-color: white !important;
border: none !important;
border-width:0!important;
}
.logo {
margin-left: 25px;
width: 80px;
height: 80px;
}
这是JS代码：
/* Navbar Sticky Header */
document.addEventListener("DOMContentLoaded", function(){
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
document.getElementById('navbar_top').classList.add('fixed-top');
// add padding top to show content behind navbar
navbar_height = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = navbar_height + 'px';
} else {
document.getElementById('navbar_top').classList.remove('fixed-top');
// remove padding top from body
document.body.style.paddingTop = '0';
}
});
});
// DOMContentLoaded end
1 个解决方案
解决方案1
2 已采纳 2021-07-02 16:02:10
给你...我会回答你的两个问题。
1.粘性导航栏
您不需要 JS 来制作粘性导航栏。 这比你想象的要容易得多。 只需将其添加到您的 CSS 中：
#navbar_top {
position: -webkit-sticky;
position: sticky;
top: 0;
}
2. 悬停在汉堡包上时的深色背景颜色
这不是阴影，而是当您将鼠标悬停在汉堡包上时的背景颜色。 当然，你可以摆脱它。 事实上，你可以去掉任何 Bootstrap 的默认设置，但是你需要添加!important来覆盖它们。 将此添加到您的 CSS：
.navbar-toggle:hover {
background-color: transparent !important;
}
请参阅下面的片段。
html { scroll-behavior: smooth; } nav { font-family: 'Poppins', sans-serif; position: sticky; border: 0; } .nav-link { margin-top: 0em; margin-left: 1.5em; font-size: 1.2em; } @media screen and (min-width: 768px) { .nav-link { margin-top: 1.0em; margin-left: 1.5em; font-size: 1.2em; } } /* Goal: Change the anchor links to color of black, the active or hovering anchor links to color of grey, and erase the black rectangle around active links */ .navbar-light .nav-item.active .nav-link, .navbar-light .nav-item .nav-link:active, .navbar-light .nav-item .nav-link:focus, .navbar-light .nav-item:hover .nav-link { color: black; } .navbar-light .nav-item .nav-link:focus { background-color: white; } .icon-bar { background-color: #000000 !important; border: 0; } .navbar-light { background-color: white !important; border: none !important; border-width: 0!important; } .logo { margin-left: 25px; width: 80px; height: 80px; } #img { height: 50%; } #navbar_top { position: -webkit-sticky; position: sticky; top: 0; } .navbar-toggle:hover { background-color: transparent !important; }
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link href='style.css' rel='stylesheet' type='text/css' /> <link rel='icon' href='fusebloomLogo.png' sizes='32x32' type='image/png'> <!-- import Lora font --> <link rel='preconnect' href='https://fonts.googleapis.com'> <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link href='https://fonts.googleapis.com/css2?family=Lora&display=swap' rel='stylesheet'> <!-- import Poppins font --> <link rel='preconnect' href='https://fonts.googleapis.com'> <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> <link href='https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap' rel='stylesheet'> <!-- import Bootstrap --> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script> </head> <body> <script src='script.js'></script> <nav id='navbar_top' class='navbar navbar-light bg-white navbar-inverse'> <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='#'>WebSiteName</a> --> <a href='index.html'><img id='img' src='fusebloomLogo.png' alt='FuseBloom logo' class='logo' /></a> </div> <div class='collapse navbar-collapse' id='myNavbar'> <ul class='nav navbar-nav'> <li class='nav-item'> <a class='nav-link' href='#home'>Home</a> </li> <li class='nav-item'> <a class='nav-link' href='#mission'>Mission</a> </li> <li class='nav-item'> <a class='nav-link' href='#reviews'>Reviews</a> </li> <li class='nav-item'> <a class='nav-link' href='#process'>Process</a> </li> </ul> </div> </div> </nav> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> </body> </html>
Bootstrap 导航栏到小屏幕尺寸的顶部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.