Sticky Shrinking Header In Oxygen Builder (That Hides On Scroll Down)

Published: 5 months ago

This tutorial will show you how to make a sticky shrinking header in Oxygen Builder, and combine that with the effect of hiding on scroll down, and showing when scrolling up. When used together, this ensures that navigation is easily accessible, but never in the way of important content.

EDIT: Before you watch this video, there's an easier way to do this using Headspace.js (introduced to us in the FB Group). We've published a made for you boilerplate on our Oxidize site. New users get it for free with the signup bonus.

Please note, Oxidize is in prelaunch alpha. You can use it, the products on the site are good, BUT we have not officially launched. Please keep it a "secret".

Like this content? Subscribe to our channel!

This code can be adapted for any website that uses HTML and has a fixed header.

If you prefer written steps:

  • Make a catchall Oxygen Builder template
  • Add a section, change the tag to header
  • Set the position to fixed under layout, change the ID to header_nav
  • Add a code block, insert the CSS code
  • Insert the JS code (modular, so you can choose the effect: Sticky Shrink on scroll, Sticky Shrink & Hide on scroll down, only hide on scroll down)

CSS For Both Effects In One

#header_nav{ height:100px; transition: top 0.5s ease-in-out, height 0.5s ease-in-out; } #header_nav .ct-section-inner-wrap { padding:10px 20px; } #header_nav.tiny.nav-up { height:50px; top: -50px; padding:10px 20px; } #header_nav.tiny.nav-down { height:50px; top: 0px; padding:10px 20px; } #header_nav.nav-up { height:50px; top: -50px; padding:10px 20px; } #header_nav.nav-down { height:100px; top: 0px; padding:10px 20px; }

JS For Both Effects In One

(function($) { // Hide Header on on scroll down var didScroll; var lastScrollTop = 100; var delta = 5; var navbarHeight = $('#header_nav').outerHeight(); $(window).scroll(function(event) { didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) lastScrollTop && st > navbarHeight){ // Scroll Down $('#header_nav').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if(st + $(window).height() 100); }); })(jQuery);

Sources: Not 100% sure where all this code came from (we've been messing around with this & variations for a while), though we didn't make it ourselves. My best guess are these sites:

  • http://jsfiddle.net/sinky/S8Fnq/
  • https://codingreflections.com/hide-header-on-scroll-down/
Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Ezoicreport this ad
Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dirk Borchers
Dirk Borchers
4 months ago

I really can't get it going. When I enter the CSS in the code block nothing happens. The header jut stays fixed on top of the page. When I add the JS I get an error message on line 24, a missing (. In the front end nothing happens at all. It seems as if the JS on this page and the one used in the video are different. Cheers for having a look at this issue.

Dirk Borchers
Dirk Borchers
4 months ago
Reply to  James LePage

James, I just recreated the header according to your video, and I ran into the same issue again. After applying the CSS nothing really happens except for that Hello World to show up next to the menu items. In the editor, the header remains fixed to the top of the page, but no shrinking or hiding happens. After applying the JS, I receive the syntax error message. And when I open the website, the image is showing 100% of it's total height, and not 100% within the header-section. Beats me why.

after applying JS.JPG
Dirk Borchers
Dirk Borchers
4 months ago
Reply to  Dirk Borchers

and one more picture

Dirk Borchers
Dirk Borchers
4 months ago
Reply to  Dirk Borchers

here we go

after applying CSS.JPG
Simon Gajdosik
Simon Gajdosik
4 months ago

Yep. Not working at all..

Mike
Mike
3 months ago
Reply to  James LePage

Code still broken on line 24

mge
mge
3 months ago

Jep, not working. That does it:

___CSS___
#header_nav{
height:100px;
transition: top 0.5s ease-in-out, height 0.5s ease-in-out;
}

.nav-up {
top: -40px;
}
___JS___

(function($) {

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}

lastScrollTop = st;

}

})(jQuery);

Source: http://jsfiddle.net/mariusc23/s6mLJ/31/

IsoGroup- Web Dev/Design, WordPress and More
In The Spotlight
Sticky Menu Boilerplate For Oxygen
$3.99 • v1.1
Go To Product Website
Discount Code: Free for first time users

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

Ezoicreport this ad
In The Spotlight
Sticky Menu Boilerplate For Oxygen
$3.99 • v1.1
Go To Product Website
Discount Code: Free for first time users
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram