Sticky Shrinking Header In Oxygen Builder (That Hides On Scroll Down)
Sticky Shrinking Header In Oxygen Builder (That Hides On Scroll Down)
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
JS For Both Effects In One
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/
Bookmark This Post
James LePage
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, this is on my todo list to check out. Can you upload a screenshot of the Error and code via the feature in this comments section?
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.
and one more picture
here we go
Yep. Not working at all..
I think we got this fixed. Code was incomplete, Resham Panth provided me with completed copy.
I have so much on my todo list, so I haven't been able to check it out, but it should work from eyeballing it. Thank you Resham!!
Code still broken on line 24
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/
I guess James would rather sell his ready made solution than offering complete solution 🙂 Nice try.
Or, just follow the tutorial showing how to make the Oxidize Headroom.js header for free. Or x2, just download the Oxidize header, which is free after the points signup bonus.
https://www.youtube.com/watch?v=2AcNZUYt6_8
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
No, it does not work.
Love how the tutorial doesn't work but conveniently he is selling a boilerplate. Looks like bait and switch to me.
It's free, the code works, there are alternatives in the comments, and I don't even think the boilerplate site is up right now.