Fade In Top Bar in the Beaver Builder Theme

Why Would You?

Ok, so you have created yourself a beautiful big header on your langing page. How can you have a menu at the top, without covering your glorious work?

Well, you could try a transparent header, sure that is effective, but if you change the background of the header, you may have to restyle all the header options, so the UX is still useable.

Or alternatively, you could just have the menu fade in once the user as scrolled an predetermined distance down the page.

The CSS

So lets cover off the CSS. The first thing we want to do is have the topbar not show on page load, and that is really simple with a single line of CSS.

.fl-page-bar {
    opacity: 0;
}

Easy done! However what we also want to do is ensure that out topbar is always visible. By that I mean, we dont want our users scrolling 500px and the menu appear but be off the screen as they have scrolled past it.

So let's change up our CSS and add a few lines of code to ensure it is always visible and stuck to the top of the screen.

.fl-page-bar {
    opacity: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 999;
}

And that is all the CSS we need for this to work.

The jQuery

Ok, this is where we need to use jQuery as we want to measure the distance the user has scrolled, and once they reach our distance, we want to fadein out top bar.

It is actually easier than it sounds, especially when you can just cut and paste the code haha.

So jump into the JavaScript Code section of the customizer and lets paste the following code, then I will run through on what is happening and how you can tweak it.

    jQuery(document).ready(function(jQuery) {
    
		/* Every time the window is scrolled ... */
		jQuery(window).scroll( function(){
		
			/* Check the location of each desired element */
			jQuery('.fl-page-bar').each( function(i){
				
				var bottom_of_object = jQuery(this).offset().top + jQuery(this).outerHeight();
				var bottom_of_window = jQuery(window).scrollTop() + jQuery(window).height();
				
				/* If the object is completely visible in the window, fade it it */
				if( bottom_of_window > bottom_of_object ){
					
					/* Checks the distance and then changes the opacity if matches */
					jQuery(this).animate({'opacity':'1'},500);
						
				}
				
			}); 
		
		});
    
	});

So what is happening? Hopefully the comments help break it down, but let me explain some more.

When the website is loaded it checks the users scrolling. Whilst the user is scrolling it is monitoring the class .fl-page-bar and checking its distance from both top and bottom of the window.

If the class is visible in the window and the distance scrolled equals 500px, then it animates the opacity to 100% which gives it a fade in look.

Configuring for Your Site

So what if you want it to appear after a longer or shorter scroll period?

Easy, all you need to do is change the 500 on the line jQuery(this).animate({'opacity':'1'},500); to what you like, just play around until you get it how you like.

Leave a Comment

You must be logged in to post a comment.