Set div width based on scroll position

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!

So what you want is when you scroll up again your width is gonna be 80%? — Endrit Shala, Aug 06 '15 at 13:59
Correct, it starts at 80%. When you scroll to the bottom, it'll be a 3rd of that size. When scrolling back to the top, it resizes back to 80%. — Paul Thibedeau, Aug 06 '15 at 14:06

score 0 · Answer 1 · answered Aug 06 '15 at 14:02

0

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.

answered Aug 06 '15 at 14:02

Endrit Shala

141
2
15

I'm just not sure I'm looking at the right piece. This has to work cross device, so I'm thinking I may need to look at the window.innerHeight to determine the height of the page, and maybe develop some sort of formula/equation to make this happen. Thanks for the suggestion. – Paul Thibedeau Aug 06 '15 at 14:06
When I tried it it worked. But maybe you want to do it another way. – Endrit Shala Aug 06 '15 at 14:07

score 0 · Answer 2 · edited May 23 '17 at 11:51

Scroll event fired once on scroll independently on how much you've scrolled. E.g. 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

score 0 · Answer 3 · answered Aug 06 '15 at 14:16

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.

Set div width based on scroll position

3 Answers3