FANDOM


This script is for PERSONAL use only!

You are free to install this script for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:Common.js or MediaWiki:Wikia.js), as it would violate Fandom's Terms of Use.
(See the customization policy)

GlobalNavBehavior is a script that allows you to change how the global navigation behaves when you scroll. By default, the script shows the global navigation when scrolling up and hides it when scrolling down.

Installation

How to Configure

Currently, the global navigation's scroll behavior and show/hide transition can be customized.

Place configuration options above the importArticles statement in your personal JavaScript.

For example:

// GlobalNavBehavior configuration
window.globalNavBehavior = {
    onScrollUp: 'hide',
    onScrollDown: 'hide',
};
 
// importArticles statement
importArticles({
    type: 'script',
    articles: [
        // ...
        'u:dev:MediaWiki:GlobalNavBehavior.js'
    ]
});

If you want to use the default for an option, you can omit it.

For example:

// GlobalNavBehavior configuration
window.globalNavBehavior = {
    transitionDuration: 300,
};

Changing Scroll Behavior

By default, GlobalNavBehavior smoothly hides the global navigation when scrolling down and shows it when scrolling up. This can be changed with the script's configuration.

Only Show Global Nav at Page Top

The global navigation is only shown at the top of the page and is hidden whether you scroll up or down.

window.globalNavBehavior = {
    onScrollUp: 'hide',
    onScrollDown: 'hide',
};

Hide While Scrolling Up, Show While Scrolling Down

window.globalNavBehavior = {
    onScrollUp: 'hide',
    onScrollDown: 'show',
};

Show While Scrolling Up, Hide While Scrolling Down

This is the default behavior of GlobalNavBehavior, so no configuration is necessary!

Always Show Global Nav

The global navigation is always shown, no matter which direction you scroll. This is the default behavior of the global navigation without this script, so installing it shouldn't be necessary. But if you really need to configure the script this way, you can use this code:

window.globalNavBehavior = {
    onScrollUp: 'show',
    onScrollDown: 'show',
};

Transition Options

Transition Duration

You can use the transitionDuration option to change how long the show/hide transition of the global navigation lasts. By default, the transition lasts 200 milliseconds (0.2 seconds).

The entered value should be

  • in milliseconds
  • just a number (omit milliseconds label)
  • followed by a comma
  • with any other configuration options

For example:

window.globalNavBehavior = {
    onScrollUp: 'show',
    onScrollDown: 'show',
    transitionDuration: 300,
};

Transition Type

You can use the transitionType option to change the type of transition used when the global navigation is hidden or shown. By default, the ease transition is used.

The entered value should be

  • exactly the same as one in the table below
  • surrounded by double or single quotes
  • followed by a comma
  • with any other configuration options
Transition Description Notes
'ease' Starts at medium speed, speeds up, and ends at low speed Default type
'linear' Constant speed throughout
'ease-in' Starts slow, then speeds up
'ease-out' Slows at the end
'ease-in-out' Starts at low speed, speeds up, and then returns to low speed
'cubic-bezier(n, n, n, n)' Allows you to define a custom transition For users experienced with CSS transitions

For example:

window.globalNavBehavior = {
    onScrollUp: 'show',
    onScrollDown: 'show',
    transitionType: 'linear',
};

See Also

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+