Show and hide navbar using javascript for scroll and hover functions

Vote count:

0

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

asked 1 min ago

Ibrahim

49

Show and hide navbar using javascript for scroll and hover functions