Method mutateElement_

src/service/fixed-layer.js:785–830

* Mutates the fixed/sticky element. At this point it's determined that the * element is indeed fixed/sticky. There are two main functions here: * 1. `top` has to be updated to reflect viewer's paddingTop. * 2. The element may need to be transferred to the separate fixed layer. * * @

(fe, index, state)

   * @private
   */
  mutateElement_(fe, index, state) {
    const {element, fixedNow: oldFixed} = fe;

    fe.fixedNow = state.fixed;
    fe.stickyNow = state.sticky;
    fe.top = state.fixed || state.sticky ? state.top : '';
    fe.transform = state.transform;

    // Move back to the BODY layer and reset transfer z-index.
    if (
      oldFixed &&
      (!state.fixed || !state.transferrable) &&
      this.transferLayer_
    ) {
      this.transferLayer_.returnFrom(fe);
    }

    // Update `top` to adjust position to the viewer's paddingTop. However,
    // ignore lightboxed elements since lightboxes ignore the viewer header.
    if (state.top && (state.fixed || state.sticky) && !fe.lightboxed) {
      if (state.fixed || !this.transfer_) {
        // Fixed positions always need top offsetting, as well as stickies on
        // non iOS Safari.
        setStyle(element, 'top', `calc(${state.top} + ${this.paddingTop_}px)`);
      } else {
        // On iOS Safari (this.transfer_ = true), stickies cannot
        // have an offset because they are already offset by the padding-top.
        if (this.committedPaddingTop_ === this.paddingTop_) {
          // So, when the header is shown, just use top.
          setStyle(element, 'top', state.top);
        } else {
          // When the header is not shown, we need to subtract the padding top.
          setStyle(
            element,
            'top',
            `calc(${state.top} - ${this.committedPaddingTop_}px)`
          );
        }
      }
    }

    // Move element to the fixed layer.
    if (this.transfer_ && state.fixed && state.transferrable) {
      this.getTransferLayer_().transferTo(fe, index, state);
    }
  }

  /**
   * @return {?TransferLayerDef}