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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Create default Scroll Status by adding div
with class scroll-status
and data-mdb-scroll-status-init
attribute to a container
element with scroll option. Then add child element with scroll-status-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
Display the modal with the specified ID
, defined in data-mdb-target
, once the specified scroll
value, set in data-mdb-scroll
, is reached.
Some content here
Multiple modal
To show modal more than once, add
data-mdb-open-once="false"
.
Some content here
Scroll Status - API
Import
Usage
Via data attributes
Using the Scroll Status plugin doesn't require any additional JavaScript code - simply add
data-mdb-scroll-status-init
attribute to
.scroll-status
and use other data attributes to set all options.
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-color="green"
.
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()
|