Scroll Status

Bootstrap 5 Scroll Status plugin

Scroll Status plugin creates progress bar indicating page or component scroll level.

Scroll status for the latest Bootstrap 5. Creates a progress bar indicating page or component scroll level.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create default Scroll Status by adding div with class scrollStatus to a container element with scroll option. Then add child element with scrollStatus-progress class.

Some content here

Global example

Create element indicating global page scroll level.

Styling

Color

Change default color of Scroll Status with data-mdb-color.

Some content here

Position

Change default vertical position of Scroll Status with data-mdb-offset.

Some content here

Height

Change default height of Scroll Status with data-mdb-height.

Some content here

Modal

One-time modal

Once show modal with specified id in data-mdb-target after reaching value set in data-mdb-scroll.

Some content here

Multiple modal

To show modal more than just one time, add data-mdb-open-once="false".

Some content here

Scroll Status - API

Usage

Via data attributes


        <div class="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </div>

Via JavaScript


        <div id="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </div>
      

        const scrollStatusExample = document.getElementById('scrollStatus');
        new ScrollStatus(scrollStatusExample)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        <div id="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </div>
      

        $('#scrollStatus').scrollStatus();

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-color. Each option can be passed with value or null.

Name Type Default Description
color String #1266F1 Defines color of the progress bar.
offset Number 0 Defines offset of the progress bar.
height String 10px Defines height of the progress bar.
global Boolean false If value is true, it will show global scroll (window scroll).
scroll Number 0 Defines value which crossing will trigger modal.
target String - Defines modal id, which will be shown.
openOnce Boolean true If value is true, it will show modal just once.

Methods

Name Parameters Description Example
getInstance element Static method which allows to get the ScrollStatus instance associated with a DOM element. ScrollStatus.getInstance(element)
dispose element Disposes ScrollStatus instance. instance.dispose() 

        const scrollStatusElement = document.getElementById('scrollStatus');
        const instance = ScrollStatus.getInstance(scrollStatusElement);
        instance.dispose();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


        import ScrollStatus from 'mdb-scroll-status';