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

Question

Good morning all,

I have this website I'm working on. It has several pages but, I want the menu to be STICKY once you scroll to it and it comes into view for the first time.

This is a template but, when you keep scrolling, the menu scrolls up and out of view.

Here's the menu code and the link to the site: 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>

UPDATE: I tried adding the following CODE from here: Bootstrap Navbar fixed on scrollY > 50, sticky but it doesn't work. You'll find this code under 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

Thank you...

Adele · Answer 1 · 2022-02-14T22:17:42.543

1

The sticky element is not magically sticky throughout the whole page when it sticks; instead it takes into consideration its "parent" container's bounds and is "sticky" only within them. Once you scroll past that parent container and it is out of your viewport, the sticky element will also be out of the viewport.

The "menu code", i.e. the <nav> element you have is all right and would stick if you placed it differently in your layout. The problem seems to be that the sticky navbar is inside the <section> container, so the sticky navbar only sticks "within" that section. But as soon as you'll scroll past that section, your navbar will be out of sight, too.

I assume you want it to start sticking after scrolling past that first uppper-most <section>. You can try placing your navbar outside your <section> element, so that its direct "parent" container is the <body> element and see what happens. I think that should do the trick in your example. :)

For a more in-depth read on sticky elements, have a look here: https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46

UPDATE: First of all, I actually think that the javascript snippet you posted after your update won't be needed at all. Unless I'm misunderstanding, I think you're aiming for quite standard sticky behaviour that should work out-of-the-box. Therefore I'd ditch that javascript for now. :)

Basically, what you should aim for is NOT to put the sticky navbar inside an element/section of the page that you intend to scroll past. This is a oversimplified version of the site I see in your example:

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

The adjustment needed would be to get that sticky navbar out from any container/section than you are intending to scroll past at some point.

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

This way it would be still rendered below the first slider-section, but would start sticking once you scroll past it.

edited Feb 14 '22 at 22:17

answered Feb 12 '22 at 20:05

Adele

36
3

Adele, thank you. I tried it and the menu appears on the first page (top with the slider) and when I scroll, it disappears. So I wish there was a way to DM you so we don't turn this into a discussion. Let me look at the link you sent for more information. I have TEAMS. Perhaps that's a method if we cannot resolve the issue here. BUT, I have faith that together, we will. Ever onward, right? – Peter The Angular Dude Feb 13 '22 at 15:32
OK, I read the article, but, it did not address the issue that I want the menu to be sticky after you scroll past the slider. It addresses sticky top and bottom but now, 'wherever' you want it to start. Let's dig deeper, Adele and see if we can make this work. Can we make a dumbed down example of the code on the link and see what we come up with? It doesn't have to be a slider but rather, TOP (move past), menu appears and stays, say, like the DOMContentLoaded function. But that never fires when I scroll past window.scrollY > 50 just fires on initial load. – Peter The Angular Dude Feb 13 '22 at 15:37
Hey! I just updated my response. Please let me know if my explanation is still unclear or if it's not what you were looking for. – Adele Feb 14 '22 at 22:20
Adele, let me get that a try. Is there any way we can collaborate off here for another project I have, respectively? I like your answer and how you are so willing to help. – Peter The Angular Dude Feb 15 '22 at 00:19
If you have further questions, feel free to keep asking on Stackoverflow. There isn't really a direct messaging feature on here, but that's how they intended it. :) Keep the discussion rolling! – Adele Feb 15 '22 at 17:17
Thank you Adele. – Peter The Angular Dude Feb 15 '22 at 19:03
Adele, I did what you suggested. Open Google Debug console and see INDEX.HTML. Now it's at the top to start and when I scroll it's covered. Oh, it's STICKY alright, but not where and when I want it. Thoughts, please? – Peter The Angular Dude Feb 17 '22 at 03:16
Glad you found the solution! – Adele Feb 17 '22 at 15:11

score 1 · Answer 2 · answered Dec 13 '22 at 11:26

In pure JavaScript (vanilla)

.html file:

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

.sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

score 0 · Accepted Answer · answered Feb 17 '22 at 03:31

This is what I found worked!

So, with Adele's help, I found this cute little FIDDLE

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

from this Stackoverflow answer:

https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll

and the CODE I used was slightly modified from the 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');
            }
        });

as I scrolled, I watched the output from the console log and when I hit 700, I adjusted the > < accordingly to be what you see above and it works!

659.0908813476562
674.54541015625
689.0908813476562
700 <<<<<< THE TARGET
703.6363525390625
717.272705078125

There was no need to move the NAV element and when I put it back to it's original position, everything fell into place.

Thanks to Adele's inspiration and a bit of Sleuthing, I got it!

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

3 Answers3