Detect Mode
You can manage the detecting on the page in 2 ways.
![Scroll indicator 2 scroll indicator allpage 1](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_allpage_1.png)
All Page
You will be able to create a personalized progress bar that covers the entire page and view the status of the position-percentage.
![Scroll indicator 3 scroll indicator sections 1](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_sections_1.png)
Sections
Otherwise, create N elements, even clickable, lean to the right or bottom to highlight the status of the position and navigate the page to the desired point.
To manage this it is necessary to define:
- The item Label
- The target #ID of Section or Element (see next paragraph*)
The POSITION trigger for the scrolling START and END point is very important. ***
This is the point at which the object is analyzed from the moment it appears in the viewport to the moment it ends; and it may be different based on the item you are analyzing
*** Sections Trigger
The triggering system checks the status of the position of the element between:
- Element
- Viewport
top bottom
center bottom
bottom bottom
center cener
top top
center top
bottom top
* Get the ID in any element
![Scroll indicator 11 copypaste element id 1](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_1.png)
Right click
![Scroll indicator 12 copypaste element id 2](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_2.png)
Copy ID
![Scroll indicator 13 copypaste element id 3](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_3.png)
Paste in the field
Indicators
For the Detecting sections we have provided many styles, which can be of type: progress or bulllet, in addition a system based on svg.
![Scroll indicator 14 scroll indicator sections 2](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_sections_2.png)
Bullets
Horizontal or vertical arrangement.
- Distance from the right or from the bottom
Numerous styles available to handle the style you want.
- Progress
- Side Progress
- Shapes SVG **
- Labels
- Vertical Labels
- Dots
- Circles
- Indent bars
- Bars
- Squares
- Lines
- CUSTOM PATH
![Scroll indicator 15 scroll indicator allpage 2](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_allpage_2.png)
Progress
In the case of a progress bar for the whole page, you can arrange it with respect to the 4 sides and define its size and width.
- Distance
- Weight
- Height
- Rounded style
Progress SHAPE
![Scroll indicator 16 scroll indicator progress shape](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_progress-shape.png)
Custom PATH
![Scroll indicator 17 scroll indicator custom path](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_custom-path.png)
** Shapes SVG
SHAPES manages the progression along a svg form-path, there are 20 predefined designs.
![Scroll indicator 38 scroll indicator transform](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_transform.png)
Transform
Style, size and position:
- X and Y
- Items space
- Dimension
- Weight
- Rounded style (only bars)
Direction &Position
Vertical
![Scroll indicator 39 scroll indicator direction vertical](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_direction-vertical.png)
Horizontal
![Scroll indicator 40 scroll indicator direction horizontal](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_direction-horizontal.png)
The second positioning parameter is optional, if not selected it will be centered
Options
Additional features:
- shows the text labels next to the indicator
- when clicked, the page scrolls on the element (optionally with offset in pixels).
- hide the browser’s native scroll bar
![Scroll indicator 41 scroll indicator options](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_options.png)
Styles
![Scroll indicator 42 scroll indicator style](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_style-768x1132.png)
Bullets
Custom colors for each state:
- Normal
- Hover
- Active
It concerns:
- Color
- Progress Line color
- Padding e Margin
![Scroll indicator 43 scroll indicator style 2](https://e-addons.com/wp-content/uploads/2020/07/scroll_indicator_style_2.png)
Progress
For the progress bar across the page.
- Color
- Progress Line color
- Padding and Margin
- Border
- 4 corners radius
- Blending mode of Progress bar