**Demo:** https://jsfiddle.net/pfhwqdgs/

Resizing or positioning items based on page scroll is a pretty common trend at the moment, so this article will serve as a reference for what's required.

The primary goal here is coming up with a normalized number; something between 0 and 1.

In applied mathematics, a number is normalized when it is written in scientific notation with one non-zero decimal digit before the decimal point.

In practice, there are four parameters we need to start with:

- What's the minimum height of our image?
- What's the maximum height of our image?
- When should we be showing the minimum height?
- When should we be showing the maximum height?

In our demo, we define those as:

```
// Minimum / Maximum height of our image
const MIN_HEIGHT = 100;
const MAX_HEIGHT = 300;
// Where we should start / end normalizing
const MIN_TARGET = 200;
const MAX_TARGET = 500;
```

This formula applies here, and to tweening, so it's good to remember:

```
min + (max - min) * ratio
```

In order to handle our image size transition, we'll apply that formula to our numbers:

```
image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio
```

Where do we get `ratio`

from? That will be our normalized number derived from our scrolling/page position.

```
ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
```

The ratio formula here is pretty similar to the above, but we reduce our dynamic value by our MIN_TARGET which will help reduce the lower end of our ratio to 0. (for normalization)

Now we have to cap the ratio so it doesn't dip below 0 or above 1.

```
ratio = Math.min(1, Math.max(0, ratio))
```

The full code looks like this:

```
const MAX_HEIGHT = 300;
const MIN_HEIGHT = 100;
const MAX_TARGET = 500;
const MIN_TARGET = 200;
var image = document.querySelector('img');
var ratio = 0;
// -------------------------------------------------------
window.addEventListener('scroll', function() {
// Determine ratio of scroll to target
ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
// Normalize ratio
ratio = Math.min(1, Math.max(0, ratio));
// Set height based on ratio
image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio;
});
window.dispatchEvent(new Event('scroll'));
```

## Top comments (0)