-
AuthorPosts
-
September 6, 2019 at 11:49 pm #1135151
Hi guys,
Is it possible to use CSS to have the header show when the user scrolls up, but then disappear when the user is scrolling down? Similar to this site: sifive.com?
September 7, 2019 at 12:04 am #1135153Hey bobfurgo,
Please provide a link to your site/page in question so we can look into this further.
Best regards,
Jordan ShannonSeptember 7, 2019 at 12:08 am #1135156It doesn’t really have to do with a particular site. I’m just wondering if something like this can be implemented, or if there is a snippet of code you can provide or that someone has already written to accomplish this? But here is the site that i’d like to have this functionality.
September 7, 2019 at 12:11 am #1135158Hi,
Here is a thread to consider:
https://kriesi.at/support/topic/hide-logomenu-header-on-scroll-down/
Best regards,
Jordan ShannonSeptember 7, 2019 at 12:16 am #1135160Thanks! I tried this script but it didn’t work unfortunately:
function add_hide_header(){ ?> <script> jQuery(window).scroll(function(){ if(jQuery(this).scrollTop() > 200) jQuery('#header_main').fadeOut('slow'); if(jQuery(this).scrollTop() < 200) jQuery('#header_main').fadeIn('slow'); }); </script> <?php } add_action('wp_footer', 'add_hide_header');
September 7, 2019 at 12:41 am #1135170this here differs a bit more on scroll direction – and has a nicer “goaway” effect:
it works with a toggle class – so you can more style that.
adjust the : //replace this value with the height of your header in px to your needsthis comes to quick css:
@media only screen and (min-width: 768px) { #header { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: transform 1s ease; transition: transform 1s ease; } #header.hide { /* a little bit more than the header height */ -webkit-transform: translateY(-153px); transform: translateY(-153px); -webkit-transition: transform 1s ease; transition: transform 1s ease; } }
this comes to child-theme functions.php:
function hide_header(){ ?> <script> (function(){ var doc = document.documentElement; var w = window; var prevScroll = w.scrollY || doc.scrollTop; var curScroll; var direction = 0; var prevDirection = 0; var header = document.getElementById('header'); var checkScroll = function() { /** Find the direction of scroll ** 0 - initial, 1 - up, 2 - down */ curScroll = w.scrollY || doc.scrollTop; if (curScroll > prevScroll) { direction = 2; //scrolled up } else if (curScroll < prevScroll) { direction = 1; //scrolled down } if (direction !== prevDirection) { toggleHeader(direction, curScroll); } prevScroll = curScroll; }; var toggleHeader = function(direction, curScroll) { if (direction === 2 && curScroll > 150) { //replace this value with the height of your header in px header.classList.add('hide'); prevDirection = direction; } else if (direction === 1) { header.classList.remove('hide'); prevDirection = direction; } }; window.addEventListener('scroll', checkScroll); })(); </script> <?php } add_action('wp_footer', 'hide_header');
see here: https://webers-testseite.de/guenni/
September 8, 2019 at 3:50 am #1135540September 8, 2019 at 10:45 pm #1135750thanks so much @guenni007! It works great but the only thing is that i’m using the burger nav on desktop, and the nav doesn’t look right with this code. Is there an adjustment to work for the burger nav? Thanks :)
September 9, 2019 at 8:08 am #1135817first of all – sorry i did not post all the code on the css you need i forgot to close the one rule and to close the media-query.
So two curly brackets at the and are missing on initial post. I now corrected the css code above.
please correct your css entries too and see if that is ok for you.( if you have choosen to switch your hamburger at 990px you had to adjust this code too to 990px)
Do you see my test page?
Otherwise it would be great to see your site to help____________
edit: you always use the burger – all the time ?
this will not work – because navigation ( and hamburger is part of that) will not work in combination with header: fixed on default
the header : fixed ended at switch to hamburger and goes to scroll away. (postiion relative or absolute ) – if you force on that case a position fixed – hamburger had to be adjusted – maybe this is possible – but at the moment I can’t deal with it.- This reply was modified 5 years, 3 months ago by Guenni007.
September 9, 2019 at 11:13 am #1135896the header fixed on mobile works nice – but only without that script. i do not know why
so media query from 990px on (min-width: 990px) and below header : fixed works. See example pageSeptember 9, 2019 at 6:31 pm #1136162Edit: Alternative Method – with always have fixed header and scroll away header.
Script for child-theme functions.php :
( maybe on some cases it is necessary to have on document ready function – my test page works without )function hide_header(){ ?> <script> (function($){ 'use strict'; var c, currentScrollTop = 0, header = $('#header'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = header.height(); currentScrollTop = a; if (c < currentScrollTop && a > b + b) { header.addClass("hide"); } else if (c > currentScrollTop && !(a <= b)) { header.removeClass("hide"); } c = currentScrollTop; }); })(jQuery); </script> <?php } add_action('wp_footer', 'hide_header');
this to quick css:
( values depends on our header setting).html_header_top.html_header_sticky #header, .responsive.html_mobile_menu_tablet #top #wrap_all #header, .responsive #top #wrap_all #header { position: fixed !important; } #header { top: 0px; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } #header.hide { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } @media only screen and (min-width: 990px) { #header.hide { transform: translateY(-153px); } } @media only screen and (max-width: 989px) { #header.hide { transform: translateY(-95px); } .responsive #top #main { padding-top:80px !important; margin:0; } }
by the way – if you have nav below logo – the nav stayes visible if you like
see testpage: https://webers-testseite.de/guenni/September 9, 2019 at 6:43 pm #1136166if you run into conflict with your hamburger shift – we had to make the shift of header by postion top!
September 11, 2019 at 2:55 am #1136854Hi,
@Guenni007 thank you for sharing.Best regards,
MikeSeptember 18, 2019 at 9:59 pm #1139713the last code snippets you gave worked great for the burger nav!! thanks so much. Please leave this thread open just incase something else comes up.
September 18, 2019 at 10:08 pm #1139718Hi Guenni007. So i took the setting off for the header to be sticky (in general settings) since when you first scroll down the header sticks, then with the new CSS it hides again. But without this general sticky heading the background color on the header doesn’t show because i’m using a transparent header on all pages…I tried adding the following to the quick css
#header.hide { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; background: #949fa1 !important; }
but the background color only shows for like half a second before disappearing again. Any tips?
October 1, 2019 at 1:20 am #1143530Hi,
Sorry for the delay. Could you provide a screencast of the issue? The header of the mcpi site seems to be working properly when we check.
Best regards,
IsmaelJanuary 4, 2021 at 8:58 pm #1270247sweet
Thanks for sharing @Guenni007.January 5, 2021 at 5:40 am #1270313Hey baucks,
I’m glad his suggestion was able to help you!
Best regards,
Jordan ShannonJanuary 7, 2021 at 1:21 pm #1270857Hello.
I use the first code (#1135170). It works really smart. Thanks again.
I use an bigger logo and a lot of text on some pages. While reading the text und scoll up a line the logo comes back und takes to much space.
Is it possible to change the code so that logo comes back only when I´m at the top (or nearly at the top) of the site?Thanks
.January 9, 2021 at 12:06 pm #1271208Hi,
@baucks thanks for the link to the script you are using, I tried testing this on my localhost and believe this adjustment will help.
Please try changing this line:else if (direction === 1)
to:
else if (direction === 1 && curScroll < 600)
this is meant to only allow the header to show when scrolling up within 600px of the top of the page.
After applying the change, please clear your browser cache and check.Best regards,
MikeJanuary 9, 2021 at 9:49 pm #1271247Thats it – works perfect.
Thank you Mike.January 10, 2021 at 12:25 am #1271263Hi,
Glad to hear that this is working for you. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Only have header show when user scrolls up’ is closed to new replies.