大家早上好，
我有我正在開發的這個網站。它有好幾頁，但是，我希望選單在您滾動到它并且第一次出現時就變得很粘。
這是一個模板，但是當您繼續滾動時，選單會向上滾動并移出視圖。
這是選單代碼和網站鏈接： 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>
更新：我嘗試從這里添加以下代碼：Bootstrap Navbar fixed on scrollY > 50, sticky但它不起作用。您將在 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
謝謝...
uj5u.com熱心網友回復：
粘性元素在粘貼時不會神奇地粘在整個頁面上；相反，它會考慮其“父”容器的邊界，并且僅在其中“粘性”。一旦您滾動經過該父容器并且它超出您的視口，粘性元素也將超出視口。
“選單代碼”，即<nav>你擁有的元素是好的，如果你在布局中以不同的方式放置它，它會粘住。問題似乎是粘性導航欄位于<section>容器內，因此粘性導航欄僅粘貼在該部分“內”。但是，一旦您滾動過去該部分，您的導航欄也會消失。
我假設您希望它在滾動超過第一個 uppper-most后開始粘住<section>。您可以嘗試將導航欄放在元素之外<section>，以便其直接“父”容器是<body>元素，看看會發生什么。我認為這應該在你的例子中起到作用。:)
如需更深入地了解粘性元素，請查看此處： https ://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
更新：首先，我實際上認為您在更新后發布的 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>
這樣它仍然會呈現在第一個滑塊部分的下方，但是一旦滾動經過它就會開始粘住。
uj5u.com熱心網友回復：
這就是我發現的作業！
所以，在阿黛爾的幫助下，我找到了這個可愛的小 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
沒有必要移動 NAV 元素，當我把它放回原來的位置時，一切都到位了。
感謝阿黛爾的靈感和一點點偵探，我明白了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429618.html
標籤：javascript css 推特引导 菜单
上一篇：更改箭頭填充引導輪播-角度