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

Question

当滚动条位于底部时，我试图使宽度DIV增长到100％，当滚动条位于页面顶部时，我会缩小到0％。

我试着这样做：

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



       });

   });

我遇到了一个问题，当我尝试使用scrollTop时，它不会计算屏幕高度，因此我总是在scrollTop为0时开始，约为宽度的20％。

你有更好的想法如何解决它？

Answer 1

我可能还没有完全理解你想要做什么，但听起来你想根据你在滚动中的位置计算0到100％之间的％。 （也许您想将垂直动作转换为水平图形表示。）

您的代码有效，只需稍作调整即可。 现在你正在计算％：

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

你想要的是：

var myPrecentage = scrolling / (myHeight - myScreen);

与以下相同：

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

（我应该补充一点，我正在使用Chrome - 浏览器的行为可能会有所不同。）

Answer 2

我认为你当前的问题是你总是从视图窗口的大小开始。 因此，除非视图为0，否则您将始终以<零数字开头。 您只想在滚动视图超出myScreen大小时添加滚动和自选画面。

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

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