Bootstrap 3 Desktop Sticky Menu on Scroll

Question

I'm trying to get the sticky bootstrap menu to work on desktops. When i scroll down to a certain div element i want the sticky menu to appear BUT when the user scrolls back up and past that div element i want the sticky menu to be hidden. Can't quite figure out whats going on.

<!--sticky desktop menu-->
        <div id="nav">
            <div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="">HOME</a></li>
                        <li><a href="#">HOW IT WORKS</a></li>
                        <li><a href="#pricing">PRICING</a></li>
                        <li><a href="#">WATCH OUR VIDEO</a></li>
                        <li><a href="#testimonials">REAL LIFE TESTIMONIALS</a></li>
                        <li><a href="#faqs">FAQ'S</a></li>
                        <li><a href="#about">ABOUT US</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>

Script below;

$('#nav').affix({
    offset: {
        top: $('.desktopSticky').height()            
    }
});

Site can be seen here: http://bit.ly/1i4VUxv

Answer 1

If you're ok doing it via scroll-position vs a defined div, this will work for you:

$(function() {
    var div = $(".sticky");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            div.removeClass('hidden-lg').addClass("visible-lg");
        } else {
            div.removeClass("visible-lg").addClass('hidden-lg');
        }
    });
});

See the bootply: http://www.bootply.com/CGY86c9Baz

If you prefer it be activated by a specific div, I think scrollspy may be your solution, but I don't know how to make it work!