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

时间:2013-12-10 19:34:39

标签: javascript jquery

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

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

2 个答案:

答案 0 :(得分:2)

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

您的代码有效,只需稍作调整即可。现在你正在根据以下方式计算%:

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

你想要的是:

var myPrecentage = scrolling / (myHeight - myScreen);

与...相同:

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

(我应该补充一点,我正在使用Chrome - 不同浏览器的行为可能不同。)

答案 1 :(得分:0)

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

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

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