Use container property to set the container in which scrolling occurs. When the Anchor component is not in the container (that is, it does not scroll with the container), you do not need to set sticky property.
[[ demo src="/demo/anchor/normal.vue" ]]
When Anchor component is in the container (rolling with the container), you can set sticky property to control the adsorption of the component when it rolls out of the container.
[[ demo src="/demo/anchor/sticky.vue" ]]
Use target-offset property to control where the anchor point scrolls to the container to start to be active.
Use sticky-offset property to control where the Anchor is in the container to start the adsorption.
[[ demo src="/demo/anchor/offset.vue" ]]
| Name | Types | Default | Description |
|---|---|---|---|
items |
Array<{value, label, children}> |
[] |
[^items] |
sticky |
boolean= |
false |
Whether produce adsorption effect. |
container |
`string | HTMLElement | Window=` |
target-offset |
`string | number=` | 0 |
sticky-offset |
`string | number=` | 0 |
^^^items
Data source array, item type is {label, value, children, ...}.
+++Field
| Name | Type | Description |
|---|---|---|
label |
string |
Text description of the node. |
value |
string |
Value corresponding to the node is generally an in-page hash, such as #button. |
children |
Array<Object>= |
Child node array of the node, Array item type is the same as the items array item. |
| +++ | ||
| ^^^ |
| Name | Description |
|---|---|
item |
[^slot-item] |
item-label |
[^slot-item-label] |
^^^slot-item Render each anchor link.
Default content: anchor link.
Scope parameters, see items property details.
^^^
^^^slot-item-label Render the text of each anchor link.
Default content: the description text label of the anchor link.
Scope parameters, see item slots.
^^^