Basilico ScrollSpy
Basilico ScrollSpy borns from the union of TopLink (for mobile view) and a normal scroll spy script
(for tablet/desktop view).
Other characteristics:
- No javascript framework used: so no Jquery old version or other conflict problems.
JSDoc
/**
* BasilicoScrollSpy({text:"", minWidth:680, menuId:"someId"})
*
* text: text to show on topLink (for mobile view)
* minWidth: if device resolution is greater than this value the button on bottom-right else on top
* onVisibleOpacity: button opacity (for mobile view)
* scrollEffect: scroll when click a link (not mobile view)
* menuId: Menu id
* menuStyle: css props to use (example menuStyle:"text-align:center; background:black")
*/
How To Use
How you can see in picture:
You simply make a menu: you give it an id (to pass as argument to script) and you make links with tag A.
The link to #top says to script to use this anchor to go Top the page.
For sections you have to give an id to each container and set the relative menu's links as I showed in picture and use this js code:
<script type="text/javascript">
new BasilicoScrollSpy({text:"^", minWidth:640, onVisibleOpacity:0.8, menuId:"menuId"});
</script>
Style customization
The menu showed while scrolling has the id: clonedMenu.
On mobile: #BasilicoTopLink is the id of top button