I have a 1 page website with fixed header and fixed banner. My header only shows when I scroll up at the about page but when im further down the about page the header wont show up anymore. please take a look at my website /

I have a 1 page website with fixed header and fixed banner. My header only shows when I scroll up at the about page but when im further down the about page the header wont show up anymore. please take a look at my website http://l.esy.es/cmeniano/

• javascript
• jquery
• html
• css

3 Answers 3

i was looking for solution and find two ways,

first

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header").style.top = "0";
  } else {
    document.getElementById("header").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

second

in js:

    var lastKnownScrollY = 0;
var currentScrollY = 0;
var idOfHeader = 'header';
var eleHeader = null;
const classes = {
  pinned: 'header-pin',
  unpinned: 'header-unpin',
};
function onScroll() {
  currentScrollY = window.pageYOffset;
  if (currentScrollY < lastKnownScrollY) {
    pin();
  } else if (currentScrollY > lastKnownScrollY) {
    unpin();
  }
  lastKnownScrollY = currentScrollY;
}
function pin() {
  if (eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.unpinned);
    eleHeader.classList.add(classes.pinned);
  }
}
function unpin() {
  if (eleHeader.classList.contains(classes.pinned) || !eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.pinned);
    eleHeader.classList.add(classes.unpinned);
  }
}
window.onload = function() {
  eleHeader = document.getElementById(idOfHeader);
  document.addEventListener('scroll', onScroll, false);
}

in css:

.header{
  transition: transform 0.25s ease-in-out;
}
.header-unpin{
  /* display: none; */
  transform: translateY(-50px);
}
.header-pin{
  /* display: block; */
  transform: translateY(0);
}

Well if I understood your question then it is because you are adding .nav-up class when you scroll down and removing the .nav-down class from the header. And your .nav-up has top:-125px property. This is what is causing your header to be "hidden".

EDIT:

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop){
       $('header').removeClass('nav-down').addClass('nav-up');
    } else {
      $('header').removeClass('nav-up').addClass('nav-down');
    }
    lastScrollTop = st;
}

So, I stripped out the delta and made the hasScrolled function simpler by just checking if user is scrolling up or down and on basis of that, it will add either .nav-up or .nav-down.

Hope it helps! :)

Include jquery in your file and use this code for your web page, I just checked it on your website using firebug.

$(window).scroll(function(e){ 
              var $el = $('header'); 

              if ($(this).scrollTop() > 200){ 
 $('header').css({'display': 'none'}); 
              }
              if ($(this).scrollTop() < 200)
              {
 $('header').css({'display': 'block'}); 
              } 
            });     

I am not sure what you exactly you are looking for, but I hope this helps you, Best of Luck. If not please try to make it clearer and I will try to help you again.