大家早上好
我正在开发这个网站。它有几个页面，但是，我希望菜单在您滚动到它并且第一次进入视图时是粘性的。
这是一个模板，但是当您继续滚动时，菜单会向上滚动并消失。
这是菜单代码和网站链接：http://wtr2022.webparity.net
<section class="menu-wrap flex-md-column-reverse d-md-flex">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
<li class="nav-item"><a href="project.html" class="nav-link">Project</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
....
</section>
更新：我尝试从这里添加以下代码：引导导航栏固定在滚动Y> 50，粘性但它不起作用。您将在 js/wtr-custom.js 下找到此代码
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
document.getElementById('ftco-navbar').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('ftco-navbar').classList.remove('fixed-top');
// remove padding top from body
document.body.style.paddingTop = '0';
}
});
});
// DOMContentLoaded end
谢谢你...
粘性元素在粘时并不是神奇地粘在整个页面上；相反，它会考虑其“父”容器的边界，并且仅在其中“粘性”。一旦您滚动经过该父容器并且它超出了您的视口，粘性元素也将超出视口。
“菜单代码”，即您拥有的
<nav><section>我假设你希望它在滚动经过第一个最上面的<section>之后开始粘住。您可以尝试将导航栏放在
<section><body>更新： 首先，我实际上认为您更新后发布的 JavaScript 片段根本不需要。除非我误解了，否则我认为您的目标是非常标准的粘性行为，应该开箱即用。因此我现在会放弃那个 javascript。 :)
基本上，您的目标不是将粘性导航栏放在您想要滚动过去的页面元素/部分中。 这是我在您的示例中看到的网站的过于简化的版本：
<body>
<section>
This is the slider section
<sticky-element />
</section>
<section>
This is the "We've been in Serving our Community for nearly 50 years!" section
</section>
...
</body>
所需的调整是将粘性导航栏从任何容器/部分中取出，而不是您打算在某个时刻滚动过去。
<body>
<section>
This is the slider section
</section>
<sticky-element />
<section>
This is the "We've been in Serving our Community for nearly 50 years!" section
</section>
...
</body>
这样它仍然会呈现在第一个滑块部分的下方，但一旦滚动经过它就会开始粘住。
.html 文件：
<nav id="menu" class="navbar navbar-expand-lg bg-light">
...
</nav>
...
<script>
let menu = document.getElementById('menu');
let offset = menu.offsetHeight;
window.onscroll = function() {
if (window.scrollY > offset-10) {
menu.classList.add("sticky");
} else if(window.scrollY < offset-20) {
menu.classList.remove("sticky");
}
}
</script>
.css 文件
.sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
所以，在Adele的帮助下，我找到了这个可爱的小FIDDLE
http://jsfiddle.net/CriddleCraddle/Wj9dD/
来自 Stackoverflow 的答案：
https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll
我使用的代码是从 FIDDLE 稍微修改过的
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop());
if ($(window).scrollTop() > 699) {
$('#ftco-navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 699) {
$('#ftco-navbar').removeClass('navbar-fixed');
}
});
当我滚动时，我观察了控制台日志的输出，当我达到 700 时，我调整了 >
659.0908813476562
674.54541015625
689.0908813476562
700 <<<<<< THE TARGET
703.6363525390625
717.272705078125
< accordingly to be what you see above and it works!
无需移动 NAV 元素，当我将其放回原来的位置时，一切都就位了。
感谢阿黛尔的灵感和一点侦查，我明白了！
const detect =this.scrollY < this.oldScroll
if(detect){
nav.classList.add('s')
nav.classList.remove('st')
}else{
nav.classList.remove('s')
nav.classList.add('st')
}
console.log(detect);
this.oldScroll = this.scrollY }`