Marks the active link in an anchor menu based on the visibility/screen position of the targets of the anchor links.

Wrap the menu anchor links with this component.

The link which its targets top is closest to and above the threshold is considered active. Except if two or more targets top are beneath the screen top. In this case the link which targets top is closest to the screen top becomes active.

The calculation measures from the top of the link targets. You can add an offset to the measurement.

A calculation is done every time a link target enters/leaves fully or half the screen or the threshold area, at initialisation and when update() is called.

Marks the active link with the class "hylo-anchor-menu-active".

Properties

createHistory: boolean = false

If "setHash" is set, the hash value will be set in the browser url bar. On default, the current browser history entry will be replaced with the new entry including the hash.

To create a new browser history entry, set this property.

offset: number = 0

A measurement offset in pixel added to the link target's top. Used to calculate the active link.

prioritizeFirst: boolean = false

If set, the top of the first link target just needs to be above the bottom screen to be considered active.

prioritizeLast: boolean = false

If set, the bottom of the last link target just needs to be above the bottom screen to be considered active.

scrollOffset: number = 0

An offset added to the position of the link target when scrolled to.

setHash: boolean = false

Sets the hash in the browser url bar. Whether a new browser history entry is created depends on "createHistory".

threshold: number = 50

Threshold in percentage of screen height form which point on the next anchor menu point is considered active.

0 <= threshold <= 100

Methods

  • Returns the currently active menu link.

    Returns Promise<HTMLElement>

  • Updates/collects the anchor links wrapped by this compponent and sets the active class.

    Called automaticly at initialisation.

    Returns Promise<void>

Events

hyloAnchorMenuChange: EventEmitter<HTMLElement>

Fires when the active menu link changes.

Emits the new active menu link.

Generated using TypeDoc