This one adds or removes a class if the document is scrolled 50 px near the top of the window.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

We can monitor the scroll position with the following code, this will console log each scroll position counting from the top into console log.

$(window).scroll(function() {
  console.log($(document).scrollTop());
});

lets say that we wanted the background of the page become pink (as you do) when we scroll down 100 px

something like this should do it

script

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('h1').addClass('pink');
  } else {
    $('h1').removeClass('pink');
  }
});

css

.pink { color:#f3b4f0; }

scroll down to see the h1 and h3 color change, then back to the top to go back to original.

$(window).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('h1').addClass('pink');
  } else {
    $('h1').removeClass('pink');
  }
});

you can also add the scroll top position into a div, if you cant be bothered looking at the console window.

Scroll Position: 0

$(window).scroll(function() {
  $('#scrollpos').html($(document).scrollTop());
});

lets stick that to the bottom of the window, just so we can see where it at.

.scroll-pos { 
	font-size:16px;
	background:rgba(0,0,0,0.9);
	color:#FFF;
	text-shadow:0px 1px 2px #000;
	position:fixed;
	bottom:0;
	right:0;
	padding:5px 10px;
}

With this code you can add it to a navigation to make it stick on scroll at a certain position. I might try that next.

Mmm.. padding