当我第一次滚动到菜单时，如何使菜单“粘”到顶部？答案

【问题标题】：How can I make a menu "sticky" to the top when I scroll to it for the first time?当我第一次滚动到菜单时，如何使菜单“粘”到顶部？
【发布时间】：2022-02-17 11:31:51
【问题描述】：

大家早上好，

我正在开发这个网站。它有好几页，但是，我希望菜单在您滚动到它并且第一次出现时保持粘性。

这是一个模板，但是当您继续滚动时，菜单会向上滚动并移出视图。

这里是菜单代码和网站链接：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

谢谢...

【问题讨论】：

标签： javascript css twitter-bootstrap menu

【解决方案1】：

粘性元素在粘贴时不会神奇地粘在整个页面上；相反，它会考虑其“父”容器的边界，并且仅在其中“粘性”。一旦您滚动经过该父容器并且它超出了您的视口，粘性元素也将超出视口。

“菜单代码”，即您拥有的 <nav> 元素是可以的，如果您在布局中以不同的方式放置它，它会保持不变。问题似乎是粘性导航栏位于 <section> 容器内，因此粘性导航栏仅粘贴在该部分“内”。但是，一旦您滚动经过该部分，您的导航栏也会消失。

我假设您希望它在滚动超过第一个最上方的<section> 之后开始粘贴。您可以尝试将导航栏放在 <section> 元素之外，这样它的直接“父”容器就是<body> 元素，看看会发生什么。我认为这应该在你的例子中起到作用。 :)

如需更深入地了解粘性元素，请查看此处： https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

更新：首先，我实际上认为根本不需要您在更新后发布的javascript sn-p。除非我有误解，否则我认为您的目标是非常标准的粘性行为，应该可以开箱即用。因此，我现在会放弃那个 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>

这样，它仍会呈现在第一个滑块部分下方，但一旦滚动经过它就会开始粘住。

【讨论】：

阿黛尔，谢谢。我试过了，菜单出现在第一页（顶部有滑块），当我滚动时，它消失了。所以我希望有办法给你发私信，这样我们就不会把它变成讨论。让我看看您发送的链接以获取更多信息。我有团队。如果我们无法在这里解决问题，也许这就是一种方法。但是，我相信我们会在一起。永远向前，对吧？
好的，我阅读了这篇文章，但是它没有解决我希望在滚动滑块后菜单保持粘性的问题。它解决了粘性顶部和底部问题，但现在，无论您希望它从哪里开始。让我们更深入地挖掘，阿黛尔，看看我们是否可以完成这项工作。我们可以在链接上制作一个简化的代码示例，看看我们想出了什么吗？它不必是一个滑块，而是 TOP（移过去），菜单出现并保持，比如说，就像 DOMContentLoaded 函数一样。但是当我滚动过去时，它永远不会触发 window.scrollY > 50 只是在初始加载时触发。
嘿！我刚刚更新了我的回复。如果我的解释仍然不清楚或者不是您想要的，请告诉我。
阿黛尔，让我试试看。有什么方法可以让我们分别为我的另一个项目合作吗？我喜欢您的回答以及您乐于提供帮助的方式。
如果您还有其他问题，请随时在 Stackoverflow 上继续提问。这里没有真正的直接消息传递功能，但这就是他们的意图。 :) 继续讨论！

【解决方案2】：

这是我发现的工作！

所以，在阿黛尔的帮助下，我找到了这个可爱的小 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 元素，当我把它放回原来的位置时，一切都到位了。

多亏了阿黛尔的灵感和一点点侦探，我明白了！

【讨论】：