ℹ️Need of ScrollSpyer?
While developing our parent company's website, we faced challenges in finding a scrollspy library that aligned with our specific requirements. It didn't make sense to incorporate multiple libraries and connect them together, so we decided to address the issues ourselves. Here are some of the problems we encountered and the solutions we implemented in this library, ensuring its compatibility with SEO practices.
Scrollspy with Animation: We incorporated support for Animate.css and developed our own Animation JS script. Additionally, we have plans to include support for more third-party animation libraries, as our vision for this library extends beyond its current capabilities.
Multi-Submenu Support: We have successfully implemented robust submenu support, although the implementation process was somewhat challenging. However, we are committed to improving and simplifying it further in our upcoming release. We believe that nothing is insurmountable.
Easing & Animations for sections: We were tired of relying on third-party libraries like jQuery Easing. Therefore, we decided to include various easing options within our library, enabling users to effortlessly apply different easing effects to their sections. Similarly, we have implemented a range of animation options. We believe this versatility is a great advantage.
Offset Support with Breakpoints (Responsive): We have addressed the issue of offsets, which are not always straightforward, particularly on small devices where content placement can become problematic based on section height. Our library includes support for offset adjustments, taking into account responsive breakpoints.
Various Methods and Hooks: We offer a range of methods to support event handling, and users can easily explore our Hooks and various method sections for a deeper understanding of their functionality.
STOP using href attrinute: We are not a fan of using an href attribute, but why? It's not always necessary to highlight sections that are crucial for SEO or search indexing. Sometimes, certain data is specific to a particular page and not intended for navigation purposes. In such cases, there is no need to use an attribute like the 'a' attribute. Instead, the 'targetSelector' property of the options object can be utilized. By assigning the value '[data-jump]' to the targetSelector, the Scrollspy library can identify and handle those specific sections accordingly. Mind-blowing right?
Last updated