javascript - 当滚动条@bottom时使用JQuery使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% 之间的 %。 (也许您想将垂直 Action 转换为水平图形表示。)

您的代码可以正常工作，只需要进行少量调整。现在您正在根据以下内容计算百分比:

var myPrecentage = (滚动 + myScreen)/(myHeight );

你想要的是:

var myPrecentage = 滚动/(myHeight - myScreen);

这与:

相同

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

(我应该补充一下，我使用的是 Chrome - 不同浏览器的行为可能有所不同。)