Swap element when sticky

  • Resolved cassihl

    (@cassihl)


    5 years, 11 months ago

    Hello,

    I’m sticking a logo on my page. Is there a way to use a different logo for the sticky version?

    The logo before scroll is large and has some transparency to it. When the page scrolls I’d like the sticky version of the logo to be smaller and solid white. Any recommendations to make this work? Maybe some additional css/javascript?

    Thanks!

Viewing 1 replies (of 1 total)

  • That’s not something you can immediately do with my plugin, but you can make use of the different classes an element has when it goes from non-sticky to sticky.

    From the FAQ:

    Is it possible to add some styles to the element but only when it’s sticky?

    To add styles to your sticky element when it’s not sticky, use classname .element-is-not-sticky.
    To add styles to your sticky element only when it’s sticky, use classname .element-is-sticky

    The following code would give your element a red background only when it’s not sticky, and blue only when it is:

    .element-is-not-sticky {
background: red;
}
    .element-is-sticky {
background: blue;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Swap element when sticky’ is closed to new replies.