Skip to main content
Tracker Header - CSS
Updated over a week ago

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%);
}
Did this answer your question?