jQuery :: Control Document Scroll

Created For: http://stackoverflow.com/q/11042692/352449

by Salustiano Silva

HTML

<p class="seeIt">d</p>
<div id="container">
<!-- start slipsum code -->

<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>

<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>

<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who...

CSS

.seeIt {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #F2F2F2;
    border: 1px solid #D9D9D9;
    padding: 3px;
    font-size: 0.8em;
}

JavaScript

$(window).scroll(function () {

  var windowH = $(window).height(),
      scrollY = getPageScroll()[1];

    // show the current value of Y    
    $('.seeIt').html(getPageScroll()[1]);

    // litle example
    if (scrollY<windowH) $('body').css({"background-color":"gray"});
    if (scrollY>=windowH) $('body').css({"background-color":"pink"});
    if (scrollY>(windowH*2)) $('body').css({"background-color":"yellow"});
});

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}