Show A Beaver Themer Header On Scroll Up
Author:
David Waumsley
Description:
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.
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.
Kind:
CSS, jQuery, Beaver
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.*/
}
Javascript:
* 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;
};