Fixed Header Transformation When Page is Scrolled

Question

I can't for the life of my figure this out. Does anyone know how this scrolling effect is created on this website? - http://blindbarber.com/news

I'm working on a project where this effect would greatly help so that my fixed navigation isn't too large when scrolling.

Thanks in advance.

Answer 1

The header stays on top with the css position:fixed .. either you can set the header css -- position:fixed right from the start or change it to position:fixed once he starts scrolling the page.. and update the header to the contents you want to keep as he scrolls..

// css
.container {
  height: 2000px;
  width: 100%;
  background-color: yellow;
}

.header {
  text-align: center;
  background-color: red;
  height: 100px;
  min-height: 50px;
  width: 100%;
}

// js

window.onscroll= function () {
  var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  var header = document.getElementById("header");
  if (top > 50){
    header.style.position = "fixed";
    header.style.height = "50px";
  } else {
    header.style.position = "relative";
    header.style.height = "100px";
  }
}

//html
<div class="container">
  <div id="header" class="header">
    Hello World
  </div>
</div>

Demo here

Answer 2

This is what your looking for I think:

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

So the google search terms that gives you an answer is "responsive menu" + javascript.

In my case I was looking for a jquery plugin so I added in "jquery". I didn't find much using "fixed header transformation"

:)