当滚动条是@底部JQuery时DIV 100％宽度

我试图使宽度DIV增长到100％当滚动条在底部，和缩小到0％，当滚动条在页面的顶部。当滚动条是@底部JQuery时DIV 100％宽度

我试图使它像这样：

$(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我alwayes开始，约20％的宽度。

你有更好的主意如何解决它吗？

来源

2013-12-10 thormayer

什么是你当前的代码发生了什么？你说屏幕高度计算不正确，你获得了什么价值，你期望什么？鉴于不正确的屏幕尺寸值，其余代码的工作？你在寻找不同的实现？你的逻辑看起来很合理，我很好奇你遇到了什么问题。 – isick

我的页面的高度例如是：2133px，当它的底部是1789px时，我的scrollTop。我是344px短，这基本上是我的屏幕高度。 – thormayer

因此，当我开始滚动时，我的“var precentage”是0.16736990154711673 px，因为它增加了屏幕高度......我需要以某种方式使其在顶部为0，并且在底部时将其添加（渐变）。 .. – thormayer

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

您的代码有效，只需稍作调整。现在你是基于计算％：

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

你想要的是：

var myPrecentage = scrolling/(myHeight - myScreen);

这是一样的：

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

（我要补充，我正在使用Chrome浏览器 - 行为可能会因浏览器而异。）

来源

2013-12-10 20:01:13

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

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

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

来源

2013-12-10 20:08:55 ShortRound1911

当滚动条是@底部JQuery时DIV 100％宽度

回答

相关问题