user1946932 user1946932 - 2 months ago 5
CSS Question

Tweak this CSS header auto-hide?

I have a header that autohides when the user scrolls down:

Can anyone edit it so that when scrolling up, the header only re-appears if the user has scrolled up at least 350px*?

(function($) {
$(function() {
var scroll = $(document).scrollTop();
var headerHeight = $('.page-header').outerHeight();
$(window).scroll(function() {
var scrolled = $(document).scrollTop();
// +100 by Me
if (scrolled + 100 > headerHeight) {
} else {
if (scrolled > scroll) {
} else {
scroll = $(document).scrollTop();

*I have images 350px tall that a user may at times just want to scroll up just a little to see the top of the image.


Here is a [JSFiddle] ( It hides the header after the user has scrolled down and brings the header back up if the user scrolled up at least 350px or if they're at the top of the page.

I'm not sure how you exactly intend to use this code but the idea of going up 350px and then showing the header again is a little flawed. The provided JSFiddle shows several images 350px tall and if I am scrolling up from the very bottom the header will appear and cover some images. (Just my thoughts)


<header class="outer page-header">
  <br> This
  <br> is
  <br> the
  <br> header
<section class="page-content page-content-margin">
  <img src="" />
  <img src="" />
  <img src="" />
  <img src="" />


var lastScrollTop = 0;
var goUp          = false;
var goUpVal       = 0;
   var st         = $(this).scrollTop();
   if (st > lastScrollTop){ // downscroll code
       goUp = false;
       if (st >= 100){
   } else { // upscroll code
       if (!goUp) {
           goUp    = true;
           goUpVal = st;
       if (goUpVal - st >= 350 || st === 0) {
  lastScrollTop = st;

The CSS is the exact same as yours.

*note the only way for the demo to work is to make the demo window size small so you can actually scroll down past 350px.

Let me know if it isn't right and I can tweak it.