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

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 >
            <nav  id="ftco-navbar">
                <div >

                    <button  type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                        <span ></span> Menu
                    </button>
                    <div  id="ftco-nav">
                        <ul >
                            <li ><a href="index.html" >Home</a></li>
                            <li ><a href="about.html" >About</a></li>
                            <li ><a href="services.html" >Services</a></li>
                            <li ><a href="project.html" >Project</a></li>
                            <li ><a href="blog.html" >Blog</a></li>
                            <li ><a href="contact.html" >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...

CodePudding user response：

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.

CodePudding user response：

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!