spz-interact-observer

<header id="header">
  <!-- ... --->
</header>

<spz-interact-observer
  layout="container"
  target-id="header"
  distance="50"
  to="header.hide;"
  from="header.show;"
></spz-interact-observer>

<div id="rely-id" style="position: sticky; top: 0; height: 50px;">
  <h1>Announcement</h1>
</div>

<!-- The `to` will be set to  60px(50px + 10px) -->
<div id="target-id" style="position: absolute; top: 10px;">
  <h3>Heading Three Level</h3>
</div>

<spz-interact-observer
  layout="container"
  target-id="target-id"
  rely-id="rely-id"
  rely-sticky
></spz-interact-observer>

required

Specifies a the id of the target element. Apply some behavior to the target element.

The element ID to be observed.

A DOM id of the dependent element. If this attribute is present, it will set the target element’s top attribute to the height of the rely-id element plus the previous top attribute’s value.

If the height of the rely-id element is 81px. The previous top attribute’s value is 20px, the top value will be set to 101px.

If this attribute is present, it only takes effect when the dependent element is a sticky layout. It must be used with the rely-id or the observe-id.

If this attribute is present, get the offset position of the target element as the distance from to switch from to to. It must be used with the from or the to.

It has the following values:

• scroll default
• mousemove: Triggered when the mouse moves.

Specify some behavior that needs to be performed when the condition is met.

Specifies some behavior that needs to be reverted when the condition is not met.

Specifies a distance to change. If the distance of the scroll is greater than the distance value, the to attribute will be executed. Otherwise, the from attribute will be executed.

Smoothness parameter. Its value is 30

No parameter required. To change the top of the element. It must be used with the rely-id attribute.

No parameter required. To change the top or bottom attribute of the element when it is the sticky of the position. It must be used with the to, the to value is to="position: top;" or to="position: bottom;".

Be automatically triggered when the change action is called.