Author: | Luuk-Dev |
---|---|
Views Total: | 1,195 views |
Official Page: | Go to website |
Last Update: | February 1, 2022 |
License: | MIT |
Preview:

Description:
ScrollWithMe is a lightweight ‘Sticky’ JavaScript library that lets an element ‘sticky’ with the user, as they scroll down the page.
Ideal for long pages where you want to have a position-fixed element like ads, sidebar widgets, comments, reviews, or chat conversations.
How to use it:
1. To begin with, include the ScrollWithMe.js library on the page.
<script src="ScrollWithMe.js"></script>
2. Attach the ScrollWithMe to the target element and determine at which position the element should scroll with the user.
<div class="scroll-with-me"> Sticky Element </div>
new ScrollWithMe(document.querySelector(`.scroll-with-me`), { startAt: 300, });
/* Example CSS */ .scroll-with-me{ position: absolute; top: 400px; width: 300px; height: 250px; left: 50px; }
3. Determine whether to release the sticky element at a specific position.
new ScrollWithMe(document.querySelector(`.scroll-with-me`), { startAt: 300, endAt: 1200, });
4. Set the distance from the top when the element gets stuck.
new ScrollWithMe(document.querySelector(`.scroll-with-me`), { startAt: 300, endAt: 1200, setTop: 100, });
5. Callback functions.
new ScrollWithMe(document.querySelector(`.scroll-with-me`), { callback: { onscroll: () => { // fired when the element is stuck }, onend: () => { // fired after the element has been released } } });