根據滾動位置設置div寬度

Question

代碼： http ： //codepen.io/anon/pen/EjrpMM

所以，我正在研究一個有趣的問題。 我正在使用一個2000px的HTML文檔，它有一個模態放在它上面。

div燈箱的寬度為80％，坐姿固定。

當向下滾動頁面時，目標是根據滾動位置控制div的寬度。 在頁面底部，它只有三分之一。

我很難找出適當的等式或公式，並且正在尋求幫助。

目前，我一直在嘗試查看window.pageYOffset，在增加時向div添加2.5％，在向上滾動時減去2.5％，使其恢復到80％的寬度。

但是，有些東西不能正常工作。 我看到社區是否有任何想法來幫助解決問題。

我沒有使用任何框架。

這是我的javascript：

var lightBox = document.getElementById('lightBox'),
count = 80,
num = window.pageYOffset;

document.addEventListener('scroll', function(e) {
  var offset = window.pageYOffset;

  num >= offset ? count += 2.5 : count -= 2.5;
  num = offset;

  lightBox.style.width = count + '%';
});

在此codepen中查看此處的代碼

http://codepen.io/anon/pen/EjrpMM

謝謝！

Answer 1

你只需要改變

+= 2.5 and -=2.5 to += 0.7 and -= 0.7

當我檢查你的代碼時，我做了這個並且它有效。

Answer 2

滾動事件在滾動時單獨滾動一次。 例如，如果您滾動1px滾動條，或使用鼠標滾動滾動100px滾動事件將被觸發一次。

因此，如果需要穩定的結果，則需要根據滾動位置（ window.pageYOffset ）計算div寬度。

檢查這個codepen fork 。 我假設在頁面末尾div寬度應為50% 。

核心部分是：

var lightBox = document.getElementById('lightBox');
var upperBound = 80;
var lowerBound = 50;

var tickValue = (upperBound - lowerBound) / window.innerHeight;

document.addEventListener('scroll', function(e) {
  var offset = window.pageYOffset;
  var count = upperBound - offset * tickValue;

  lightBox.style.width = count + '%';
});

重要提示：對於crossbrowser方式獲取innerHeight您可以查看此答案

Answer 3

這是一個簡單的等式。 設f : scroll |-> f(scroll)是一個給你div寬度的函數。 你想要f(0) = 0.8, f(2000)= 1/3 。

假設您希望漸進為線性，因此f(scroll) = a*scroll + b ，您可以輕松推斷出b = 0.8和a = (1/3 - 0.8)/2000 = -0.000233 。 現在，對於任何滾動值，您都可以找到div的寬度。

現在您可以根據需要更改值， f(scroll) = (minWidth-maxWidth)/pageLength * scroll + maxWidth 。