Tracker Header - CSS

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--unpinne.

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? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us