How to make specific actions when scroll reaches x position

1

So, how can I make the navbar, for example, change the size when the user scrolls down and be back to normal once it scrolls to the top? And can I make it at specific places so for example when it reaches x pixels or x percentage?

2

Hey Pedro,

nice to meet you! :wave:

You can read the current position in the viewport and change your styling depending on this.

If you give us a code project, e.g. on codepen,
we can show you some stuff.

3

Hello

This is what I currently have https://codepen.io/BobinBieber/pen/MWyEbxW, I want to make the top bar smaller once the user starts scrolling.

Also is there a way to stop the images from moving when a border is added? It uses grid

Cheers

4

Alright, so you have to find out these steps:

  1. how can I track a scroll event
  2. what should happen after the event happened
5

I already know what to do after it happens, I just can’t find out how to detect scrolling.

6

You can literally search for this (in quotes) and add javascript to the search