ScrollMenu

A jQuery plugin for hide header on scroll down and show on scroll up.

Including files

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- ScrollMenu core JS file -->
<script src="jquery.scrollmenu.min.js"></script>

Initializing

$(document).ready( function() {
	$('.selector').scrollMenu();
});

Styles

ScrollMenu works adding and removing a class on scroll event. You need to customize your styles. (See the CSS demo file).

Settings

ScrollMenu accepts settings from an object of key/value pairs.

Example:

$('.selector').scrollMenu({
	key: value,
	key: value
});

List of settings

addClassTo:

Selector: Element to add the scroll class

Default: $(this)

scrollUpClass:

String: Class added to the element when scroll up

Default: is-visible

scrollDownClass:

String: Class added to the element when scroll down

Default: is-hidden

scrollTopClass:

String: Class added to the element when scroll reaches top

Default: is-top

scrollBottomClass:

String: Class added to the element when scroll reaches bottom

Default: is-bottom

scrollOffsetInClass:

String: Class added to the element when is in the offset

Default: is-offset-in

scrollOffsetOutClass:

String: Class added to the element when is out of the offset

Default: is-offset-out

timeOut:

Integer: Delay scroll time out

Default: 1000/60

tolleranceUp:

Integer: Scroll up delta

Default: 0

tolleranceDown:

Integer: Scroll down delta

Default: 0

scrollOffset:

Integer: Scroll offset

Default: $(this).outerHeight()

onScrollMenuUp:

Function: Callback that fires on scroll up

Default: function() {}

onScrollMenuDown:

Function: Callback that fires on scroll down

Default: function() {}

onScrollMenuTop:

Function: Callback that fires when scroll reaches top

Default: function() {}

onScrollMenuBottom:

Function: Callback that fires when scroll reaches bottom

Default: function() {}

onScrollMenuOffsetIn:

Function: Callback that fires when scroll is in offset

Default: function() {}

onScrollMenuOffsetOut:

Function: Callback that fires when scroll is out of offset

Default: function() {}

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. onScrollMenuUp & onScrollMenuDown)

onScrollMenuUp : This event is triggered on scroll down

onScrollMenuDown : This event is triggered on scroll up

onScrollMenuTop : This event is triggered when scroll reaches top

onScrollMenuBottom : This event is triggered when scroll reaches bottom

onScrollMenuOffsetIn : This event is triggered when scroll is in offset

onScrollMenuOffsetOut : This event is triggered when scroll is out of offset

Example:

$( document ).on( 'onScrollMenuDown', function() {
	// Your code here
});

Credits

Copyright (c) 2017 Fabio Quarantini

License

MIT License