使用JQuery使滚动条为@bottom时DIV的宽度为100%

make DIV 100% width when scrollbar is @ bottom with JQuery

本文关键字：100% DIV @bottom JQuery 滚动条 使用      更新时间：2024-06-01

当滚动条在底部时，我试图使宽度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%。

你对如何解决这个问题有更好的想法吗？

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

您的代码可以工作，只需要进行小的调整。现在你正在计算%基于：

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

你想要的是：

var myPrecentage = scrolling / (myHeight - myScreen);

与相同

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

（我应该补充一点，我使用的是Chrome，不同浏览器的行为可能不同。）

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

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

var myPrecentage;
if((scrolling - myScreen) < myScreen){
       myPrecentage = (scrolling) / (myHeight );               
} else {
       myPrecentage = (scrolling + myScreen) / (myHeight );
}
相关文章：