使用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 );
}