CODEWITHSUNDEEP
javascriptjquery
andy
andy

Reputation: 2754

get percentage scrolled of an element with jquery

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 to calculate the height of one by percentage.

We can set the starting width quite easily and detect the scroll easily enough too, as can we get the height of the element that'll trigger the animation, I just can't get it as a percentage.

If I can figure out how to return the percent of conheight scrolled then this should be easy.

$(window).scroll(function() {

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

    $('.bar-long').css('width', scrollPercent +"%"  );

});

Here's a jsfiddle, http://jsfiddle.net/SnJXQ/

This is animating bar-long based on the percent scrolled of the body element.

Animates from 0% - 100% (well, it doesn't really, but I can't figure out why).

What I'd like to do is get scroll percent of the .post div, then animate bar-long relative to that. ie. Scrolled 10% of .post, .bar-long is 10% width, scrolled 70% of .post, .bar-long is 70% width.

Upvotes: 15

Views: 41286

Answers (3)

Nathan G
Nathan G

Reputation: 1781

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

Upvotes: 2

Xanfar
Xanfar

Reputation: 156

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 :)

Upvotes: 6

Oriol
Oriol

Reputation: 288660

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());

Upvotes: 30

Related Questions