In this blog we are going to share how we created a floating topbar on our company's website - www.sparxsys.com The moment you open the site, the topbar looks normal, just like any other site, but the moment you start scrolling the bar goes up, disappears and it comes back and stays on top for the rest of the site. It could be a great way to engage with your users and highlight certain links of your website.
Step 1: Copy the following code in your theme's js folder. In our case we use Omega4, so copy this js code at /omega_sub_theme/js/menu-scroll.js location.
jQuery(document).ready(function(jQuery) {
var scrolled = false;
jQuery(window).scroll(function() {
console.log(jQuery(window).scrollTop());
if ((jQuery(window).scrollTop() >= 270) && (scrolled === false)) {
jQuery('.l-logobar').hide();
jQuery('.l-logobar').addClass('fixed');
jQuery('.l-logobar').fadeIn();
scrolled = true;
}
else if (jQuery(window).scrollTop()
scrolled = false;
jQuery('.l-logobar').removeClass('fixed');
}
});
Basically this Javascript code will apply one extra class "fixed" to your region "l-logobar". The css for this extra class "fixed" need to be defined in your style.
Step 2: Tell your theme to load this Javascript file.
In your subtheme's .info file include the following line.
scripts[] = js/menu-scroll.js
We are almost there.
Step 3: Define the style for "fixed" class in your theme.
Since we use Omega4, so we will add the following code in our .scss file.
.fixed {
position: fixed;
top:0; left:0;
z-index:1000;
width: 100%;
}
Demo: Sparxsys Solutions