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

Accepted Answer

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!

Bootstrap 3 Desktop Sticky Menu on Scroll

Solution

Problem