formstone/src/less/sticky.less

Library of modular front end components.

/**
 * @component
 * @name Sticky
 */

@import "imports/utils.less";

/**
 * @class
 * @name .fs-sticky-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-sticky-clone
 * @type element
 * @description Cloned elemtn
 */

/**
 * @class
 * @name .fs-sticky.fs-sticky-stuck
 * @type modifier
 * @description Indicates stuck state
 */

/**
  * @class
  * @name .fs-sticky-clone.fs-sticky-stuck
  * @type modifier
  * @description Indicates stuck state
  */

.fs-sticky {

  &-element {
    will-change: scroll-position;
  }

  &-element&-stuck {
    position: fixed;
  }

  &-element&-passed {
    position: absolute;
  }

  // Clone

    &-clone {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  &-clone&-stuck {
    display: block;
  }

  // container

  &-container {
    position: relative;
  }
}