Question

I have been looking for a script that allows for a menu to show up when a user scrolls down the page, and when the user scrolls back to the top the menu disappears. I haven’t had any luck finding anything. I have tried sticky headers, but that’s not the effect I am looking for.

Sorry if this type of question isn’t allowed.

Answer 1

Sometime ago I used something like the below, you should be able to modify it for what you need. It originally was like “scroll back to the too button” but the functionality of hiding and showing an element depending on how much you have scrolled should be the same.

// Create the link and add it to the DOM
$('<a href="#" class="scrolltop"></a>').hide().appendTo($('body'));

jQuery.fn.topLink = function(settings) {

    settings = jQuery.extend({
                        min: 1,
                        fadeSpeed: 200,
                        ieOffset: 50
                        }, settings);

    return this.each(function() {
        //listen for scroll
        var el = $(this);
        $(window).scroll(function() {
            if($(window).scrollTop() >= settings.min){
                el.fadeIn(settings.fadeSpeed);
            }else{
                el.fadeOut(settings.fadeSpeed);
            }
        });
    });

};


// To top scroll
$('.scrolltop').topLink({
    min: 100,
    fadeSpeed: 500
});

/*CSS*/
a.scrolltop {
display: block;
z-index: 999;
position: fixed;
bottom: 20%;
right: 0;
width: 47px;
height: 47px;
background-color: black;
padding: 0 auto;
}