3

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.

GuerillaRadio
  • 1,267
  • 5
  • 29
  • 59

2 Answers2

12

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

Vivek Chandra
  • 4,240
  • 9
  • 33
  • 38
  • Downvoting for being not precise and not actually correct. You cannot create such functionality using pure CSS nowadays. You have to use some js helper magic. – shabunc Feb 19 '12 at 19:32
  • 1
    agree.. dint check the site properly.. that's why the quick partially correct answer.. using JS on scroll and then making the `position:fixed` would be right.. – Vivek Chandra Feb 19 '12 at 19:33
0

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"

:)

saliem
  • 71
  • 1
  • 7