Sticky Sliding Header; Multi-Level; WordPress

Recently, I was tasked with the goal of creating a sliding, sticky header. The cumbersome aspect of this, was that it contains multiple elements, only the middle of which actually needs to “slide up” (think slideUp()). So, I went through several methods, none of which matched the exact “vision” the client had for the appearance.
Did I mention this was for WordPress? This is a WordPress theme, that I created, in order to work with WooCommerce. The header consisted of three main elements. A top navigation bar, a middle/center logo image, and a bottom category nav. Additionally, there was the need to create a mobile-responsive hamburger menu, which I did the easy way…I just created two menus, hid one in standard css, and displayed it in a media query.
I’m getting off topic here. At any rate, in order to accomplish the sliding, yet sticky header, I implemented some good ol’ jQuery. The caveat to this, was that the top navigation menu and the bottom category navigation menu, both need to remain present, while the logo slides up. To add further depth to this caveat, the actual animation needs to take place when that bottom element is hit. So, it gets a little tricky.
Here is how I accomplished it:

//check to see if use is scrolling
$(window).scroll(function () {
//get the position of elements from top of window
var docViewTop = $(window).scrollTop();
var elemTop = $('#categorymenu').offset().top;
//determine if element is in correct position to slideup
if (elemTop < $(window).scrollTop()) { //this is the area that needs to "disappear" in order for the header to shrink $('#innerheader').slideUp(); //make sure the category menu (bottom element) is fixed $('#categorymenu').css('position','fixed'); //doing this helps avoid a skip/white space on the move $('#categorymenu').animate({ 'top': '0px'},0); //this allows the menu to slide with the slideUp element $('#categorymenu').animate({ 'top': '50px'}, 500); // make sure top menu is fixed $('#topmenu').css('position','fixed'); //this gives that top menu a bit of a "slide" of its own $('#topmenu').animate({ 'top': '0px'}, 500); //this is the small version of the logo that is present on small header, we fade it in $('#smalllogo').fadeIn(1100); } var elemBottom2 = $(window).scrollTop(); if (elemBottom2 == 0) { // here we are determining if the scrollbar is basically at the top of the page $('#small-logo').fadeOut(); $('#innerheader').slideDown(1000); $('#top-menu').css('position','absolute'); $('#topmenu').css('top', '0px'); $('#categorymenu').css('position','absolute'); $('#categorymenu').animate({ 'top': '230px'},1300); } });

As you can see, the primary objective here, is to simply do some basic changes to the CSS, specifically on scrolling, and based on the scrollTop position of the element in question vs. the scrollTop position of the window itself.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>