If you are using multiple states, and seeing unexpected behavior, it may be related to the order of your individual states.

How does the order of states work?

States are evaluated left to right. The order of states can be moved by dragging and dropping them in the order you want them to be in.

In this example, we have 3 states on our sticky header. The default state set the background of our header to blue. The green state changes the header to green when the screen is scrolled > 300 pixels. The red state changes the header to red when the screen is scrolled to > 600 pixels.

In the order Default > Green > Red, the header will never change to red no matter how far you scroll.

This is because of the order of operations of states. Pixels > 300 is evaluated as true first, and therefore the green state stays active.

To ensure that after scrolling to > 600 pixels the header turns read (i.e, the red state is activated) you must place it before the green state.