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

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

Solution

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!