<b:scrollSpy>
is a wrapper of the native bootstrap scrollspy function which links a menu to
the content of a scrollable page. The standard behavior is that a menu jumps to another page or to a certain
position within the current page. /lt;b:scrollSpy />
adds the backward link. As you scroll through
a page, the menu is updated when you enter a section of the page which can be reached by clicking a menu entry.
Menu entries and document sections are linked via the id of the section. You can jump to a section
of the current of by defining a menu entry with a fragment URL, such as href="#firstSection"
.
BootsFaces also adds AJAX to this feature.You can define an action listener in the backend JSF bean receiving the name of current highlighted section via AJAX.
Is very important that the section you're using as a scroll container has the CSS position property set to "relative".
In most cases this scroll container is the <h:body />
. Make sure to set the attributes
height
and the overflow-y:scroll
if using another scroll container than <h:body />
.
Using the scrollspy requires three simple steps:
<b:scrollSpy />
and passing it the id of the menu.Also try our full screen example.
Attribute | Default value | Description |
---|---|---|
auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
container | (none) | Id of the element that is the scrollable container. Search expressions are allowed if they yield only one result. If not specified, body is set by default. |
id | (none) | Unique identifier of the component in a namingContainer. |
offset | 0 | Scroll offset |
rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
selection-listener selectionListener (alternative writing) |
(none) | Selection listener called on selection changed. |
smooth | false | Enable smooth scroll |
smoothSpeed | 800 | Speed of the smooth scroll (default 800) |
target | (none) | Id of the navigation target. Usually the id of the NavBar component. Search expressions are allowed if they yield only one result. If not specified, component with .navbar class is set. |
update | (none) | Component(s) to be updated with ajax. |