Streaming live at 10am (PST)

While page is scrolling | using px instead of %

Hello :slight_smile:

Is it possible to somehow use pixel instead of percentage to start an animation ?
At the moment, my navigation backround remains transparent from 0% to 10%.
Then, from 11% to 100% its background will be white.

The problem is, the length of the body is unknown to me… I wish I could get this effect after having scrolled let’s say 800px instead of 10% of the page… so that I always know when the navigation background color will take place…

Is that possible ?

Read-only link:

Here is my public share link: LINK
(how to access public share link)

I don’t think this is possible on Webflow interactions, you can always create a ‘trigger’ that at your 800 px of your element will trigger the animation needed.

1 Like

hey @aaronocampo !

Thank you for getting back at me, appreciate !
All right, I just needed someone to confirm it was not possible.
I will try alternatives then, thanks ! :slight_smile:

1 Like

Hey @aaronocampo,

So I’ve found an alternative :slight_smile:
Wrote a few lines of javacript and it seems to do exactely the trick I need (smoothly implemented it within my Webflow project too) :

 * Scroll based nav bar opacity 👻
 * Expected behaviour:
 * turn background-color to transparent after scrolling 300px

document.addEventListener('scroll', function() {
  // define the navigation div
  const nav = document.getElementById('navigation');
  // define the scroll element
  const scrollElm = document.scrollingElement;
  // calculate how many pixels have been scrolled from the top
  let pixelScrolled = scrollElm.scrollTop;
  /* console.log(pixelScrolled); */

  if (pixelScrolled < 300) {
    // from 0 to 300 pixel, color is white = 'white';
  } else if (pixelScrolled > 300) {
    // from 0 to 300 pixel, color is transparent = 'transparent';

You can have a look at the script in action on my codepen:


Now just need a way to smooth the transition out :slight_smile:

So the idea behind it is whenever you’re scrolling an element the nav bar shows a different background colour?

Nope the idea is to change an element’s background color after having scrolled a specific amount of pixels. Since we can only do percentage based scroll animation, I had to use custom code to make a pixel based “interraction”.

Yeah I get what you want to achieve, the only thing that I don’t get is why not using a trigger element to do this.

  1. The element can be 800px on size, or
  2. The element can be at 800px of the top of the section you need the interaction to happen

I’m just saying this to avoid the need of custom code, but if you have it figured out it’s ok.