【发布时间】：2020-02-17 00:01:36
【问题描述】：
您好，对于我的网站，我希望第二个白色菜单栏移动到顶部中间并在我开始向下滚动时保持在顶部。我遵循了有关如何执行此操作的教程，但由于某种原因，它移动到了最左边并且没有一直扩展。 （出于测试目的，将导航栏变为红色。）
我对 javascript 很陌生，所以请放轻松。 :)
这是我正在开发的网站。 http://lonestarwebandgraphics.com/
const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);
// 135 140 .fixed-nav .header-menu_wrap .header-container_wrap {
position: fixed;
box-shadow: 0 5px rgba(0, 0, 0, 0.1);
background: red;
} <!-- Bottom White header START-->
<nav class="header-menu_wrap">
<div class="header-container_wrap container">
<div class="header-container__flex">
<div class="header_caption">
<!-- MENU -->
<nav id="site-navigation" class="main-navigation stuckMenu" role="navigation">
<!-- HAMBURGER BARS -->
<!-- <button class="menu-toggle" aria-controls="main-menu" aria-expanded="false">
<i class="menu-toggle" aria-controls="main-menu8" aria-expanded="false">
<i class="fas fa-bars"></i>
</i>
</button> -->
<!-- HAMBURGER BARS END -->
<!-- MENU START -->
<ul class="menu" id="main-menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#photo-gallery">PHOTO GALLERY</a></li>
<li><a href="#video-example">VIDEO EXAMPLE</a></li>
<li><a href="#contacts">CONTACTS</a></li>
</ul>
<!-- MENU START END -->
<!-- SEARCH ICON -->
<div class="header__search">
<i class="fas fa-search"></i>
</div>
</nav>
</div>
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>【问题讨论】：
-
我编辑了您的原始帖子，将代码作为片段包含在内，并在末尾添加了返回行（目前尚不可见）。但我总结了结果：它有效 XD。
标签： javascript navbar sticky