Show a Beaver Themer header on scroll up
Beaver Themer comes with a few preset options. You can make it transparent, have it fixed on scroll up and down, and shrink on scroll too. There isn’t is an option to have it appear on up scroll only, but it only needs a small snippet of JavaScript and CSS.
The JavaScript
I tried a few scripts that swapped CSS selectors depending on the direction of scroll, but could not get these working smoothly. The easiest approach I fond came from a W3 schools tutorial: “how to hide menu on scroll“. I slightly reformatted the JavaScript to allow more CSS to the header.
/\* When the user scrolls down, hide the header. When the user scrolls up, show the header\*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header-scroll-up").style = "top:0px; background-color: #f0f0f0; ";
} else {
document.getElementById("header-scroll-up").style = "top:-80px; background-color: rgba(0, 0, 0, 0); ";
}
prevScrollpos = currentScrollPos;
};
Notes
- Rather that referencing a js file in your theme you can add this to you Beaver Builder global settings (Ctrl/Cmd +U) when in the page builder editor.
- This is using getElementById (“header-scroll-up”) so we need to add “header-scroll” to the ID field under the advanced tab of the row the header is in.
- The part that says “top:-80px” may need adjusting according to the height of your header. It is how far up the header needs to go to be hidden from view on scroll down.
- In this snippet I added CSS for “background-color”. This is used on a site where the homepage need a transparent header on load. On scroll to the top the transparent header is no longer seen with this.
The CSS
#header-scroll-up {
position: fixed; /\* Makes it stick \*/
top: 0; /\* Stay on top \*/
width: 100%; /\* Full width \*/
transition: top 0.3s; /\* Transition effect when sliding down (and up) \*/
z-index:20; /\* added because the BB number counter module appeared over the header \*/
}
.admin-bar #header-scroll-up
{
margin-top: 32px; /\* added so the WP bar did not obscure the header when logged in \*/
}
#fl-main-content
{
margin-top: 100px; /\* The space need after the header and the main content \*/
}
.fl-builder-content\[data-type="header"\].fl-theme-builder-header-shrink IMG
{
max-height: 30px !important; /\* shinks the logo image if using Beaver Themer's
shrink option. You could swap the IMG select for something else you want to make smaller \*/
}
.fl-theme-builder-header
{
background-color: #f0f0f0; /\* Because the transition effect on the header you can see a flash
of the site's background color. This mask this by adding a matching header area background.\*/
}
**
Final comment
**
This should work on any theme using a Beaver Themer replacement header.
I believe there is an built in option for this in Astra and the Page Builder Framework theme which you may prefer to use. The Beaver Builder and the Generate Press theme don’t have this.