get percentage scrolled of an element with jquery

Question

I\'m trying to get an div to animate 0% - 100% relative to the percentage scrolled of an element.

Now I\'ve set up a few variables, but I\'m having trouble trying t

Answer 1

Let's say you want to keep track of the scroll of some document found in some IFrame in your page.

object.addEventListener("scroll", documentEventListener, false);

Then your event listener should look like this:

function documentEventListener(){
  var currentDocument  = this;
  var docsWindow       = $(currentDocument.defaultView); // This is the window holding the document
  var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
  var scrollTop        = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
  var docHeight        = $(currentDocument).height();    // This is the full document height.

  var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
  var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
  console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}