Tracker Header Class

You can customize the look and feel of the header intervening via css and using the calsses that are 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