javascript - 根据滚动位置设置 div 宽度

Question

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

所以，我正在研究一个有趣的问题。我正在处理一个 2000 像素的 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 + '%';
});

在此代码笔中查看代码

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

谢谢!

Answer 1

你只需要改变

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

当我检查您的代码时，我这样做了并且成功了。