使用JQuery滚动条为@ bottom时，使DIV为100％宽度

Question

Im trying to make a width DIV grow to 100% when the scrollbar is at the bottom, and shrink to 0% when the scrollbar is at the top of the page.

I tried to make it like this :

$(document).ready(function () {



       var myWidth = $(window).width();
       var res = myWidth / 100;


       var myHeight = $(document).height();


       var myScreen = $(window).height();


       $(window).scroll(function () {

           var scrolling = $(window).scrollTop();

           var myPrecentage = (scrolling + myScreen) / (myHeight );

           console.log(myPrecentage);
           $('#com1').css("width", ((myPrecentage) * 100) + "%");



       });

   });

I came across a problem, when I try to use the scrollTop, it doesnt calculate the screen height, so I alwayes start when the scrollTop is 0, about 20% of width.

have you got better idea how to tackle it ?

Answer 1

I may not have fully understood what you are trying to do, but it sounds like you want to compute % between 0 and 100% based on where you are in your scroll. (Perhaps you want to translate vertical action to horizontal graph representation.)

Your code works, and just needs minor adjustment. Right now you are computing % based on:

var myPrecentage = (scrolling + myScreen) / (myHeight );

What you want is:

var myPrecentage = scrolling / (myHeight - myScreen);

Which is same as:

$(window).scrollTop() / ($(document).height() - $(window).height());

(I should add, I'm using Chrome - behavior may differ across browsers.)

Answer 2

I think your current problem is that you're always starting off with the size of the view window. So unless the view is at 0, you'll always start with a < zero number. You only want to add scrolling and myScreen when the scrolling view has passed beyond the myScreen size.

http://jsfiddle.net/ufomammut66/C2aFH/

var myPrecentage;
if((scrolling - myScreen) < myScreen){
       myPrecentage = (scrolling) / (myHeight );               
} else {
       myPrecentage = (scrolling + myScreen) / (myHeight );
}