Why is scrolling not triggering my scroll function

Question

Working Example Fiddle

The Broken Fiddle

I wrote both Fiddles above(with help from stackoverflow), in the first example the $('#scroll_screen').scroll(function() works and I'm able to see my console.log messages and the intended actions happen (scrolling to the bottom changes the div's background color)

In my 2nd Fiddle, I'm using the exact same jQuery function and the console.log messages aren't even firing.

Do you see my mistake?

The Scroll function

var wireInfinScroll = function() {

  console.log('in wireInfinScroll');

  $('#scroll_screen').scroll(function() {

      console.log('scrolling...');
      console.log(' ');
      console.log( $('#scroll_screen').scrollTop() );
      console.log( $('#content').height() - $('#scroll_screen').scrollTop() );

      if ( $('#scroll_screen').scrollTop() >= $('#content').height() - $('#scroll_screen').scrollTop() ) {

          // run our call for pagination
          $('#scroll_screen').css('background', 'yellow');
          console.log('Bottom of Page!');

      } else if ( $('#scroll_screen').scrollTop() < $('#content').height() - $('#scroll_screen').scrollTop() ) {

          $('#scroll_screen').css('background', 'pink');

        }

    });

}

wireInfinScroll();

Answer 1

Fixed, my HTML DOM elements some how broke the function, even thought they are named the same and positioned the same.... still digging into why that is

http://jsfiddle.net/leonwho/kcnLx/

$('#content').scroll(function() { not #scroll_screen