isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
 on January 28, 2021
Last modified on January 7th, 2022

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

By James LePage
 on January 28, 2021
Last modified on January 7th, 2022

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/
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dirk Borchers
Dirk Borchers
1 year 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
1 year 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
1 year ago
Reply to  Dirk Borchers

and one more picture

Dirk Borchers
Dirk Borchers
1 year ago
Reply to  Dirk Borchers

here we go

after applying CSS.JPG
Simon Gajdosik
Simon Gajdosik
1 year ago

Yep. Not working at all..

Mike
Mike
1 year ago
Reply to  James LePage

Code still broken on line 24

mge
mge
1 year 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/

Philipp
Philipp
10 months ago

I guess James would rather sell his ready made solution than offering complete solution πŸ™‚ Nice try.

Philipp
Philipp
10 months ago

Just replace the content of the custom code widget with this...

CSS
__________________________

#site-header {
top: 0;
width: 100%;
position: fixed;
transition: all 0.3s ease;
z-index: 100;
}
#site-header.hide {
top: -100px;
}
_________________________

JavaScript
_________________________

(function(){

var doc = document.documentElement;
var w = window;
var curScroll;
var prevScroll = w.scrollY || doc.scrollTop;
var curDirection = 0;
var prevDirection = 0;
var header = document.getElementById('site-header');
var toggled;
var threshold = 200;

var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
if(curScroll > prevScroll) {
// scrolled down
curDirection = 2;
}
else {
//scrolled up
curDirection = 1;
}

if(curDirection !== prevDirection) {
toggled = toggleHeader();
}

prevScroll = curScroll;
if(toggled) {
prevDirection = curDirection;
}
};

var toggleHeader = function() {
toggled = true;
if(curDirection === 2 && curScroll > threshold) {
header.classList.add('hide');
}
else if (curDirection === 1) {
header.classList.remove('hide');
}
else {
toggled = false;
}
return toggled;
};

window.addEventListener('scroll', checkScroll);

})();
_______________________

after that just give your header section the ID of #site-header

Damian
Damian
6 months ago
Reply to  Philipp

No, it does not work.

Mike Georgacas
Mike Georgacas
8 months ago

Love how the tutorial doesn't work but conveniently he is selling a boilerplate. Looks like bait and switch to me.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram