CODEWITHSUNDEEP
jqueryhtmlcssnavbar
Jessica
Jessica

Reputation: 47

How To Customise The Hover Effect On The Navigation Bar

The issue I'm encountering is slightly trivial but I am hoping someone can help find an appropriate solution. I have my blog's navigation bar coded in such a way that the bar doesn't appear until the reader is scrolling down the page. This is exactly how I wanted the effect to be executed, however, I have noticed that once you refresh the page the navigation bar appears at the top of the page but when you scroll down it disappears for a slight bit and then reappears. I was wondering whether there was something I could add in the html coding which would prevent the navbar from appearing immediately at the top of the page after a refresh.

I'm not entirely certain whether I have phrased this correctly but if you go onto my blog - http://www.blankesque.com - you should have a better idea of the issue at hand.

I have included the jquery coding I have added above the tag /body :

jQuery(document).ready(function(){
jQuery(window).scroll(function(){
  var scrollbar = jQuery(window).scrollTop();
  if (scrollbar > 75) {
    jQuery('#wctopdropcont').fadeIn();
  } else {
    jQuery('#wctopdropcont').fadeOut();
  }
});
});

Upvotes: 0

Views: 53

Answers (1)

Captain Quirk
Captain Quirk

Reputation: 376

It seems like you forgot to change the css to 

display: none

Your css looks like this:

#wctopdropcont {
   width: 100%;
   height: 45px;
   display: block;
   padding: 5.5px 0 0 0;
   z-index: 100;
   top: -2px;
   left: 0px;
   position: fixed;
   background: #f5f5f5;
   border-bottom: 1px solid #f0f0f0;
   display: block;
}

display: block is in there twice even.

Try this:

#wctopdropcont {
   width: 100%;
   height: 45px;
   display: none;
   padding: 5.5px 0 0 0;
   z-index: 100;
   top: -2px;
   left: 0px;
   position: fixed;
   background: #f5f5f5;
   border-bottom: 1px solid #f0f0f0;
}

Your JavaScript will change the „display" option to "block" when you scroll down again, so menu bar will be visible.

Upvotes: 1

Related Questions