Class: Scrollmenu

Responsiville. Scrollmenu

A responsive scrollmenu for the Responsiville framework. It makes a menu, or any HTML element for that matter, stay fixed on top of the screen as the user scrolls down the page. Pretty useful in responsive web design and in long web pages in general.

new Responsiville.Scrollmenu(options)

responsiville.scrollmenu.js, line 66

Creates and initialises the scrollmenu.

Name	Type	Description
`options`	Object	The initialisation options of the module.

Properties:

Name Type Description

options

Object

The options that define the object behaviour.

Properties

Name	Type	Description
`debug`	boolean	Whether to print debug messages in the browser console.
`slug`	boolean	A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
`element`	string	Selector for the element that actually is the element to be fixed.
`wrapper`	string	The class of the wrapper element that will wrap around the actual element.
`enabled`	string	The class added to the cloned element when the scrollmenu is enabled. Note that the scrollmenu might be there without being enabled. Enabled does not mean active and visible. Enabled means having the readiness to become active upon the desired page scroll.
`active`	string	The class added to the scrollmenu whenit becomes active.
`activeBody`	string	The class added to the body element when the scrollmenu becomes active.
`zIndex`	string	Specify a z-index property different than the the default.
`offsetTop`	string	The extra space to wait for the user to scroll down to, after the original element is out of sight, before showing the scrollmenu.
`offsetBottom`	string	The reverse of offsetTop, the extra space before the original element would be back in sight, as the user scrolls up, where the scrollmenu will be hidden.
`enter`	string	Comma separated list of breakpoints in which the module enters, wihch means it is enabled (not activated).
`leave`	string	Comma separated list of breakpoints in which the module leaves, which means it is disabled.

Author:

Nevma, info@nevma.gr

License:

Nevma Copyright (c) http://www.nevma.gr

Fires:

Responsiville.Scrollmenu#event:init

Extends

Members

staticResponsiville.Scrollmenu.AUTO_RUN

Properties:

Name	Type	Description
`AUTO_RUN`	boolean	Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Scrollmenu.defaults

Properties:

Name	Type	Description
`defaults`	Object	Default values for this module settings.

Methods

staticResponsiville.Scrollmenu.autoRun(){void} responsiville.scrollmenu.js, line 281

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.

Returns:

Type	Description
void

activate(){void} responsiville.scrollmenu.js, line 421

Activates the scrollmenu, which means fixes it on top of the screen as the user keeps scrolling down.

Fires:

Returns:

Type	Description
void

deactivate(){void} responsiville.scrollmenu.js, line 472

Deactivates the scrollmenu, which means restoring it to its original state.

Fires:

Returns:

Type	Description
void

disable(){void} responsiville.scrollmenu.js, line 387

Disables the scrollmenu. It does not deactivate it, it does not close it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive web design.

Fires:

Responsiville.Scrollmenu#event:disabled

Returns:

Type	Description
void

enable(){void} responsiville.scrollmenu.js, line 353

Enables the scrollmenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the user scrolls down enough for the element to be hidden) then the element is activated (which means it is fixed at the top of the screen). Useful in responsive web design.