Responsive floating nav.

nav.js

// .site-header 24 to 18
// You *should* prefix this before using it. 

var start = 439; // Starting scrollY
var end = 463; // Ending scrollY
var from = 24; // Initial value (before start)
var to = 18; // Final value (after end)
var perpx = (to - from) / (end - start);
var element = document.querySelector(".site-header");
function set(n) { // Function to set the style
	element.style.fontSize = n + "px";
}

var scrollY = 0;
var ticking = false;
var update = function update() {
  var now = scrollY;
  if (now < start) {
    set(from);
  }
  else if (now > end) {
    set(to);
  }
  else {
    set((now - start) * perpx + from);
  }
  ticking = false;
};
var requestTick = function requestTick() {
  if (!ticking) {
    window.requestAnimFrame(update);
    ticking = true;
  }
};
var onScroll = function onScroll() {
  scrollY = window.scrollY;
  requestTick();
};
window.addEventListener("scroll", onScroll, false);

Remember to use hardware accel!