Use the container prop to set the container where scrolling occurs. When the Anchor component is not in the container (i.e. it does not scroll with the container), there's no need to set the sticky prop.
[[ demo src="/demo/anchor/normal.vue" ]]
When the Anchor component is in the container (rolling with the container), the sticky prop can be set to control the attachment of the component when it scrolls out of the container.
[[ demo src="/demo/anchor/sticky.vue" ]]
Use the target-offset prop to control where the anchor scrolls into the container and becomes active.
Use the sticky-offset prop to control where in the container the Anchor starts to attach.
[[ demo src="/demo/anchor/offset.vue" ]]
| Name | Types | Default | Description |
|---|---|---|---|
items |
Array<{value, label, children}> |
[] |
[^items] |
sticky |
boolean= |
false |
Whether to apply sticky effect. |
container |
`string | HTMLElement | Window=` |
target-offset |
`string | number=` | 0 |
sticky-offset |
`string | number=` | 0 |
^^^items
The datasource array. The type of each item is {label, value, children, ...}.
+++Properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive labe of the item. |
value |
string |
The value of the item, usually an in-page hash, such as #button. |
children |
Array<Object>= |
The children array of the item, with the same type as the items array item. |
| +++ | ||
| ^^^ |
| Name | Description |
|---|---|
item |
[^slot-item] |
item-label |
[^slot-item-label] |
^^^slot-item Renders each anchor link.
Default content: anchor link.
See the items prop for scope properties details.
^^^
^^^slot-item-label Renders the label of each anchor link.
Default content: the label of the anchor link.
See the items prop for scope properties details.
^^^