Make An Element Follow The User As They Scroll Down – ScrollWithMe

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
      }
    }
});