Trigger events and animations while scrolling your page.
\n\nUsage
\n\nThe scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.
\n\nData attribute | \nDescription | \n
---|---|
data-uk-scrollspy="{cls:'MY-CLASS'}" | \n Applies the class only the first time the element appears in the viewport. | \n
data-uk-scrollspy="{cls:'MY-CLASS', repeat: true}" | \n Applies the class everytime the element appears in the viewport. | \n
data-uk-scrollspy="{cls:'MY-CLASS', delay:600}" | \n Adds a delay in milliseconds to the animation. | \n
Typically, classes from the Animation component are used together with the scrollspy.
\n\nExamples
\n\nThis example uses the repeat: true
option. Scroll up and down to see the triggered animations.
Fade
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nScale up
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nScale down
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nSlide top
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nSlide bottom
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nSlide right
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nSlide left
\nLorem ipsum dolor sit amet, consectetur adipisicing elit.
\nDelay
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nDelay
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nDelay
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nDelay
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nMarkup
\n\n<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>\n\n<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>\n\n<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>
\n\n\n \n\n
JavaScript options
\n\nThis is an example of how to set options via attribute:
\n\ndata-uk-scrollspy="{cls:'uk-animation-fade'}"
\n\n Option | \nPossible value | \nDefault | \nDescription | \n
---|---|---|---|
cls | \n string | \n‘uk-scrollspy-inview’ | \nClass to add when element is in view | \n
initcls | \n string | \n‘uk-scrollspy-init-inview’ | \nClass to add when element is in view for first time | \n
topoffset | \n integer | \n0 | \nTop offset before triggering in view | \n
leftoffset | \n integer | \n0 | \nLeft osset before triggering in view | \n
repeat | \n boolean | \nfalse | \nApplies the in view class everytime the element appears in the viewport. | \n
delay | \n integer | \n0 | \nDelay time in ms | \n
Events
\n\nYou can bind callbacks to following events for custom functionality:
\n\nName | \nDescription | \n
---|---|
uk.scrollspy.init | \n Triggered when the element is initially in the viewport | \n
uk.scrollspy.inview | \n Triggered when the element is in the viewport | \n
uk.scrollspy.outview | \n Triggered when the element leaves the viewport | \n
Example
\n\n$('[data-uk-scrollspy]').on('uk.scrollspy.inview', function(){\n // custom code...\n});\n
\n\n \n\n
Scrollspy Nav
\n\nTo automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute data-uk-scrollspy-nav
to any navigation. Each menu item must link to the ID of its corresponding part of the site.
Data attribute | \nDescription | \n
---|---|
data-uk-scrollspy-nav | \n Triggers the JavaScript necessary for the functionality of the scrollspy nav. | \n
data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}" | \n Looks for the closest element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. | \n
data-uk-scrollspy-nav="{smoothscroll:true}" | \n Applies the Smooth scroll component when skipping between different sections of the site. | \n
data-uk-scrollspy-nav="{cls:'MY-CLASS'}" | \n By default ScrollspyNav toggles the uk-active class. Use the cls option to use your own class name. | \n
Markup
\n\n<ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">\n <li><a href="#MY-ID">...</a></li>\n <li><a href="#MY-ID2">...</a></li>\n</ul>\n\n<div id="MY-ID">...</div>\n<div id="MY-ID2">...</div>
\n\n \n\n
JavaScript options
\n\nThis is an example of how to set options via attribute:
\n\ndata-uk-scrollspy-nav="{smoothscroll:true}"
\n\n Option | \nPossible value | \nDefault | \nDescription | \n
---|---|---|---|
cls | \n string | \n‘uk-active’ | \nClass to add to active element | \n
closest | \n CSS selector | \nfalse | \nElement selector to aply the active class to | \n
topoffset | \n integer | \n0 | \nSroll top-offsset | \n
leftoffset | \n integer | \n0 | \nSroll left-offsset | \n
smoothscroll | \n boolean | \nfalse | \nScroll animation | \n
Events
\n\nName | \nParameter | \nDescription | \n
---|---|---|
init.uk.scrollspy | \n event | \nOn scrollspy first init | \n
inview.uk.scrollspy | \n event | \nElement entered view-port | \n
outview.uk.scrollspy | \n event | \nElement left view-port | \n