Ibrahim Ibrahim - 6 months ago 61
CSS Question

Show and hide navbar using javascript for scroll and hover functions

I am creating a website with twitter bootstrap and for some of the functionality I am using javascript.

I have created a navbar which hides when at the top of the page and when scrolled down to a certain point it shows. I then created a function for when the user is at the top of the page they can hover over a transparent div and then unhide the navbar.

Here is my scripting:

//Navbar Hide On Scroll

(function ($) {
$(document).ready(function () {

// hide .navbar first
$(".navbar").hide();

// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
}(jQuery));

/* Show navbar */

$(function () {
$('#shownav').hover(function () {
$('.navbar').fadeIn();
});
});

/* when navbar is hovered over it will override previous */

$(function () {
$('.navbar').hover(function () {
$('.navbar').show();
}, function () {
$('.navbar').fadeOut();
});
});


The issue i am having is that I only want the hover function to be active when at the top of the page but when the scroll function is activated I want it to stop as currently when the navbar is shown using the scroll function it disappears when the user hovers on and off the navbar.

Can someone help me to put the script right to stop the hover function when the page is scrolled past a certain point ?

Thanks

Ibrahim

Answer

You could use a flag to share the state between the scroll and hover callbacks like this:

(function ($) {
var isNavBarShown = false;

    $(document).ready(function () {

        // hide .navbar first
        $(".navbar").hide();

        // fade in .navbar
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn navbar
                if ($(this).scrollTop() > 100) {
                    $('.navbar').fadeIn();
                    isNavBarShown = true;

                } else {
                $('.navbar').fadeOut();
                isNavBarShown = false;
            }
        });

        /* Show navbar */


        $('#shownav').hover(function () {
            if (isNavBarShown) { return; }
            $('.navbar').fadeIn();
        });

        /* when navbar is hovered over it will override previous */

        $('.navbar').hover(function () {
            if (isNavBarShown) { return; }
            $('.navbar').show();
        }, function () {
            if (isNavBarShown) { return; }
            $('.navbar').fadeOut();
        });
    });
}(jQuery));

Notice that I included everything inside the anonymous function (function($) {...})(jQuery) to share scope.

$(function () {...}) is the same as $(document).ready(), so you don't need those, just add everything inside your first document.ready.

Also, changing styles during scrolls can really hurt your page's performance. It's better to periodically check if the page has scrolled, and then executing your code instead of attaching it directly to you scroll callback.