You can customize the look of the header intervening via CSS and using the classes assigned to the header selector when scrolling the page.
when you are on top .trackerheader--top;
when you are not on top .trackerheader--not-top;
when you are at the bottom .trackerheader--bottom;
when you are not at the bottom .trackerheader--not-bottom;
when the header is in show mode .trackerheader--pinned;
when the header is in hide mode .trackerheader--unpinned.
The CSS code for the animation of the header is the following:
.dce-trackerheader .trackerheader {
will-change: transform;
transition: transform 200ms ease-in-out;
}
.dce-trackerheader .trackerheader--pinned {
transform: translateY(0%);
}
.dce-trackerheader .trackerheader--unpinned {
transform: translateY(-100%);
}