根据滚动位置设置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 。