drabiter/index.html

## index.html
<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" src="style.css">
  </head>
  <body>
    <div class="spacer">Spacer</div>
      <div id="comments">
          <div class="container">
             Comments
          </div>
      </div>
    <div>Footer</div>

    <script src="plugin.js"></script>
  </body>
</html>

## plugin.js
/* ------------------------------ jQuery Plugin ------------------------------ */
;(function(window, document, $, undefined) {
  /**
   * Determines if an element was scrolled into view.
   * @param {!Element} el
   * @return {!Boolean}
   **/
  var wasScrolledIntoView = (function() {
    var e;
    (e = document.documentElement || document.body.parentNode) && typeof e.scrollTop == 'number' ? e : e = document.body;

    return function wasScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return rect.top < e.clientHeight;
    }
  })();

  // Global timer/listener
  var scrollTimer;
  var elements = [];

  $(window).on('scroll', function() {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function() {
      var i;
      var l;
      var wasInView;

      for (i = 0, l = elements.length; i < l; i++) {
        wasInView = wasScrolledIntoView(elements[i][0][0]);
        if (elements[i][0].data('_wasScrolledIntoView') != wasInView) {
          elements[i][0].data('_wasScrolledIntoView', wasInView);
          elements[i][1].call(elements[i][0], wasInView);
        }
      }
    }, 50);
  });

  // Pluginify
  $.fn.wasScrolledIntoView = function(hollaback) {
    this.each(function() {
      elements.push([$(this), hollaback || $.noop]);
    });
  };
})(this, this.document, jQuery);


/* ------------------------------ Usage ------------------------------ */
$('#comments').wasScrolledIntoView(function(wasInView) {
  $(this).toggleClass('show-comments', wasInView);
});

## style.css
.spacer { background: lightgrey; height: 1000px; }
#comments .container { display: none; background: lightblue; padding: 20px 0; height: 250px; }
#comments.show-comments .container { display: block; }
	<html>
	<head>
	<title>Test</title>
	<link rel="stylesheet" src="style.css">
	</head>
	<body>
	<div class="spacer">Spacer</div>
	<div id="comments">
	<div class="container">
	Comments
	</div>
	</div>
	<div>Footer</div>

	<script src="plugin.js"></script>
	</body>
	</html>
	/* ------------------------------ jQuery Plugin ------------------------------ */
	;(function(window, document, $, undefined) {
	/**
	* Determines if an element was scrolled into view.
	* @param {!Element} el
	* @return {!Boolean}
	**/
	var wasScrolledIntoView = (function() {
	var e;
	(e = document.documentElement \|\| document.body.parentNode) && typeof e.scrollTop == 'number' ? e : e = document.body;

	return function wasScrolledIntoView(el) {
	var rect = el.getBoundingClientRect();
	return rect.top < e.clientHeight;
	}
	})();

	// Global timer/listener
	var scrollTimer;
	var elements = [];

	$(window).on('scroll', function() {
	clearTimeout(scrollTimer);
	scrollTimer = setTimeout(function() {
	var i;
	var l;
	var wasInView;

	for (i = 0, l = elements.length; i < l; i++) {
	wasInView = wasScrolledIntoView(elements[i][0][0]);
	if (elements[i][0].data('_wasScrolledIntoView') != wasInView) {
	elements[i][0].data('_wasScrolledIntoView', wasInView);
	elements[i][1].call(elements[i][0], wasInView);
	}
	}
	}, 50);
	});

	// Pluginify
	$.fn.wasScrolledIntoView = function(hollaback) {
	this.each(function() {
	elements.push([$(this), hollaback \|\| $.noop]);
	});
	};
	})(this, this.document, jQuery);


	/* ------------------------------ Usage ------------------------------ */
	$('#comments').wasScrolledIntoView(function(wasInView) {
	$(this).toggleClass('show-comments', wasInView);
	});
	.spacer { background: lightgrey; height: 1000px; }
	#comments .container { display: none; background: lightblue; padding: 20px 0; height: 250px; }
	#comments.show-comments .container { display: block; }