当我第一次滚动到它时，如何使菜单 "sticky" 到顶部？

Question

大家早上好，

我正在使用这个网站。它有几个页面，但是，我希望菜单在您滚动到它并且第一次出现时是粘性的。

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

这是菜单代码和 link 站点：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

谢谢...

Answer 1

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

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

我假设您希望它在滚动到第一个 uppper-most <section> 之后开始粘贴。您可以尝试将导航栏放在之外 <section> 元素，这样它的直接“父”容器就是 <body> 元素，看看会发生什么。我认为这应该可以解决您的示例中的问题。 :)

有关粘性元素的更多 in-depth 阅读，请看这里： https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

更新：首先，我实际上认为根本不需要您在更新后发布的 javascript 片段。除非我误解了，否则我认为您的目标是应该工作的相当标准的粘性行为 out-of-the-box。因此，我暂时放弃 javascript。 :)

基本上，您的目标应该是不要将粘性导航栏放在您打算滚动过去的页面的 element/section 内。这是我在您的示例中看到的站点的过度简化版本：

<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>

所需的调整是将粘性导航栏从任何 container/section 中移出，而不是您打算在某个时候滚动过去。

<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>

这样它仍然会呈现在第一个 slider-section 下方，但一旦你滚动经过它就会开始粘住。

Answer 2

这是我发现的有效方法！

所以，在阿黛尔的帮助下，我找到了这个可爱的小东西FIDDLE

http://jsfiddle.net/CriddleCraddle/Wj9dD/

来自这个 Whosebug 答案：

我使用的 CODE 是从 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 元素，当我把它放回原来的位置时，一切都就位了。

多亏阿黛尔的灵感和一些调查，我明白了！

当我第一次滚动到它时，如何使菜单 "sticky" 到顶部？

How can I make a menu "sticky" to the top when I scroll to it for the first time?

javascript

css

menu

twitter-bootstrap