SOLVED: Sticky header while scrolling doesn't use transition

Bugs
1

Bricks Version: 1.4RC

Small bug. A header is set to Sticky and a scrolling background colour is set. When the page scrolls, the background colour is applied, but it’s instantaneous, no transition.

Looking at the CSS, it seems there is a transition applied:
#brx-header.sticky { transition: background-color .2s,transform .4s; }

But the scrolling background colour is applied to the container WITHIN, not the brx-header.sticky element, so the transition doesn’t happen.

#brx-header.sticky.scrolling > .brx-container {
    background-color: var(--bricks-color-kubwcm);
}

While you’re fixing this, could you also include box-shadow in the transition, as well as allow setting the transition duration, delay and easing?

2 Likes
2

Hi Eric,
Thanks so much for your report!

I was able to reproduce the background-color transition issue and added it to our bug tracker.
As for the scrolling box-shadow and the custom settings of the transition, I can’t make a concrete statement right now - but we’ll see what we can do :v:

Best regards,
timmse

3

Box shadow should definitely included in transition, so in the end something like this:

#brx-header.sticky {
    transition-duration: .4s;
    transition-property: box-shadow, transform;
}
#brx-header.sticky > .brx-container {
    transition: background-color .4s;
}

By the way, very minor thing, but it seems all header CSS is included twice:

image

1 Like
4

Hi Yan,
yes, that’s exactly how it should look like.
Thanks for pointing out the duplicate code!

Best regards,
timmse

1 Like
5

Oh and by the way, text color needs a transition as well if sticky text color set :wink:

(I had kind of a subtle awkward flash each time the header transitionned and couldn’t understand why, since bg color had a transition…)

2 Likes
6

Hi Eric,
The issue has been fixed in Bricks 1.5beta. We’ve added a new transition field, so you can add any transition of your choice. However, the transition does not (yet) affect the slideUp effect - but this will be the case in the 1.5 stable.

Best regards,
timmse

1 Like