Streaming live at 10am (PST)

While page is scrolling | using px instead of %

#1

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:
https://preview.webflow.com/preview/further-main-nav-v-6?utm_source=further-main-nav-v-6&preview=098ba3a3375d4c7da9ebc51d7f20837e


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

Did IX2 permanently drop Symbol support? Promised in Oct '17
#2

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
#3

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
#4

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
    nav.style.backgroundColor = 'white';
  } else if (pixelScrolled > 300) {
    // from 0 to 300 pixel, color is transparent
    nav.style.backgroundColor = 'transparent';
  }
});

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

EDIT:

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

#5

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

#6

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”.

#7

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.