On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hidden using the "inactive" class with "display: none". It then appears by removing the "inactive" class and adding the "active" class with "display: inline-block".
View the animated gif here:
Check out the live version here:
However, the transition from "display: none" to "display: inline-block" is quite sudden. I need assistance in creating a smoother transition where the logo is revealed from left to right, gently pushing the social icons to the right.
Below is the code snippet:
HTML
<div class="topbar-container">
<div id="slc" class="notonmobile scroll-logo inactive">
<a href="http://mydivision.net/" title="MYDIVISION.NET | Home">
<img src="http://mydivision.net/wp-content/themes/v1/img/scroll-logo-small.png" alt="Logo" />
</a>
</div>
<div id="social_container">
...
</div>
...
</div>
</div>
CSS
#topbar {display: inline-block; width: 100%; padding: 0; height: 40px; background: #000; position: fixed; top: 0; z-index: 9999;}
.topbar-container {margin: 6px 20px; line-height: 24px;}
.scroll-logo.inactive {display: none;}
.scroll-logo.active {display: inline-block; float: left; margin-right: 20px;}
.scroll-logo img {height: 24px; padding: 3px 0;}
#social_container {float: left; width: 192px;}
jQuery
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() >= $('.sticky-element-active').offset().top - 40) {
$("#slc").addClass("active");
$("#slc").removeClass("inactive");
} else {
$("#slc").removeClass("active");
$("#slc").addClass("inactive");
}
});
});