當滾動條是@底部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％寬度

回答

相關問題