我有一个响应式标头，它会随着屏幕尺寸的变化而变化。事实证明，这使得创建一个粘性和响应式导航栏变得困难，该导航栏不会跳转，因为标题大小总是在变化。我正在使我的网站对移动设备友好，这是我已经工作了几个小时的问题。
我尝试将我的导航栏包裹在div 包装器和其他一些建议的东西中，以防止它跳跃。
.HTML：
<img src="banner.png" alt="Kayla Mustion - Full-Stack Web Developer" class="responsive">
</head>
<body>
<div class="navbar" id="navbar">
<a class="active" href="index.html">Home</a>
<a href="projects.html">Projects</a>
<a href="photography.html">Photography</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="mobileMenu()">
<i class="fa fa-bars"></i>
</a>
</div>
页面底部的Javascript：
<script>
function mobileMenu() {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
window.onscroll = function() {stickyNav()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyNav() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
.CSS：
.responsive {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 95%;
height: auto;
}
.navbar {
overflow: hidden;
background-color: #B2861E;
position: sticky;
scroll-behavior: smooth;
}
.navbar a {
float: left;
display: block;
color: #453C32;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #4F5D75;
color: #453C32;
}
.navbar a.active {
background-color: #453C32;
color: #B2861E;
}
.navbar .icon {
display: none;
}
.content {
padding: 30px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: auto;
}
我希望导航栏在到达顶部时粘住，无论屏幕尺寸如何，当它到达像素的某个点时都不会跳跃。我发布了与本节相关的内容，但如果需要，可以将整个代码上传到某个地方。
好的，所以我添加了一些引导程序，因为我经常使用引导程序，并找到了一些我想尝试的代码。我将导航栏包装在一个粘性的顶级引导包装器中。希望这对将来的某人有所帮助！
从本质上讲，现在无论我的响应式标题图像大小如何，导航栏都会粘在页面顶部。这样它就可以响应，我不必为标题设置任何特定大小。