Skip to content

Configuration

Mateusz Żołdak edited this page Jul 17, 2023 · 6 revisions

navLinksSelector

A selector targeting anchor tags in some kind navigations.

type: string

default: "nav a"

anchorActiveClass

Class name that will be added on anchor if section was reached

type: string

default: active

sectionActiveClass

Class name that will be added on section when reached

type: string

default: active

changeOffset

A distance from the top of page, that the next element must be scrolled to in order to be activated. Value given in precents (0-100)% - default (50)

type: number

default: 50

defaultActiveElement

A selector to element, which obtain class active, if none section was reached or none is active while using exactMatch option.

type: string

default: undefined

behavior: on undefined, first link in array will be set as active

updateATagClass

Indicates if anchor tags should become active class.

type: boolean

default: true

defaultLinkActive

Determines whether first link element should be set as active if no section reached. May be combined with exactMatch option and/or defaultActiveElement option, to set other element to become class instead of first link.

type: boolean

default: true

setClassesOnSections

Indicates whether the element with a matching ID should have the active class added to it when it is reached.

type: boolean

default: false

exactMatch

Value will change into undefined if offset isn't exactly in some of section - it means, you can clear hash or active class if target offset find itself between important sections. You can use saveHashBetweenSections, to behave last section hash, but clear active class from nav link.

type: boolean

default: false

updateHash

Updates hash accordingly to section. Might be combined with exactMatch option, and need to be activated to saveHashBetweenSections property makes any

type: string

default: false

saveHashBetweenSections

Automatically take last seen section id as hash, if current offset doesn't match any section.

conditions: updateHash and exactMatch options has to be set to true. Then if this value will be set to false, hash will be empty if offset doesn't match any section.

type: boolean

default: true

parentsObtainingActiveClass

Array of selectors for closest parent elements, where class 'active' should be added or removed when section changes

type: array with selectors

default: []

Example usage to set classes on closest li and nav element

{
    parentsObtainingActiveClass = ["li", "nav"]
}

allowedPaths

Array with paths, where script will be evaluated. Path will be evaluated with match function. You can use some of useful regexes below to enclose script only to one particular site or sites set.

type: array of regex

default: []

Useful regexes:

  • ^[^/]*/$ - use it to let script working only on root page - "/"
  • ^/demo/$ - use to match exact site e.g. - "/demo/"
  • ^/demo/ - use to match demo and all subsites, which path begins with 'demo' e.g. - "/demo/subsite/..."

onChange

Array of functions, that should be fired when section changes. Callback function receives onePageNav object: callback(onePageNavObject)

type: array

default: []

debugLine

Shows debug accordingly to offset in changeOffset option

type: string

default: false

Operating on onePageNav object

These properties are present at object passed into onChange callback,

currentSection

Keeps active section after change.

previousSection

Keeps active section before change.

navLinks

Keeps all links matched to navLinksSelector value.

sections

Array with all sections matched to navLinks.

elementDefaultActive

Element that has been matched with defaultActiveElement selector.

Checking methods

If you want to check, where section finds itself accordingly to current offset, use Class Offset.(documentation not fully )