根据滚动位置设置div宽度

Question

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

So, i'm working on an interesting problem. I am working with a 2000px HTML document, that has a modal placed ontop of it.

The width of the div lightbox is 80%, and it's sitting positioned fixed.

The goal is, when scrolling down the page, to control the width of the div based on the scroll position. At the bottom of the page, it's only a third in size.

I've had trouble figuring out the proper equation or formula for this, and was seeking help.

Currently, I've been trying to look at the window.pageYOffset, to add 2.5% to the div while increasing, and minus 2.5% when scrolling back up, to bring it back to it's 80% width.

However, something isn't working right. I was seeing if the community had any ideas to help solve the problem.

I'm not using any frameworks for this.

Here's my 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 + '%';
});

View the code here, in this codepen

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

Thank you!

Answer 1

You just have to change

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

When I checked your code I did this and it worked.

Answer 2

Scroll event fired once on scroll independently on how much you've scrolled. Eg if you've scrolled 1px scrollbar, or scrolled 100px using mousewheel scroll event will be fired once.

So if you need stable results you will need to calculate your div width depending on scroll position ( window.pageYOffset ).

Check this codepen fork . I've assumed that in the end of page div width should be 50% .

Core part is:

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 + '%';
});

Important note: for crossbrowser way to get innerHeight you can check this answer

Answer 3

This is a simple equation. Let f : scroll |-> f(scroll) be the function that gives you the width of your div. You want f(0) = 0.8, f(2000)= 1/3 .

Let's say you want the progression to be linear so f(scroll) = a*scroll + b , you can easily deduce that b = 0.8 and a = (1/3 - 0.8)/2000 = -0.000233 . Now for any scroll value, you can find the width of your div.

Now you can change the values when you want, f(scroll) = (minWidth-maxWidth)/pageLength * scroll + maxWidth .