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+"%");
}

Answer 2

Demo

Your problem is the same as How to get horizontal scrolling percentage of an HTML element in JavaScript?, but vertically.

Then, to get the vertically scrolled percentage, use

/*  JS  */ var scrollPercentage = 100 * containeR.scrollTop / (containeR.scrollHeight-containeR.clientHeight); 
/*jQuery*/ var scrollPercent = 100 * $(containeR).scrollTop() / ($(containeD).height() - $(containeR).height());

In your case, containeR = window; containeD = document:

var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

Answer 3

Ok I see what you are trying to achieve....in fact I just did something very similar. Most solutions I found out there also were only for full page examples with window or document properties. Instead I needed this in a specific div which in my case was actually used to update the horizontal position of another div.

First, you are going to want the scroll event attached to your $('.post')

Next, the height of the $('.content') is going to equal your actual Scroll Height

Lastly, apply your percentage formula : (Y / (scrollHeight - postHeight)) * 100 = scrollPercent

So instead of using document or window attributes your code should be as follows:

$('.post').scroll(function() {
  var currY = $(this).scrollTop();
  var postHeight = $(this).height();
  var scrollHeight = $('.content').height();
  var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
});

You can find the fiddle here: JS Fiddle For Div Scroll Percentage

The current project where I have implemented this is located here: Vertical Scroll Drives Horizontal Position

I hope this solves your problem :)