Stick-n-Slide

How to use

In your HTML/CSS:

1. Make a table.

2. Ensure that the the table cells that you want to stick in place have backgrounds and borders defined directly on them. Not on the rows, but on the cells themselves.

   Example:

   // Correct
   td {
     background: gray;
   }
   
   // Incorrect
   tr {
     background: gray;
   }

3. Wrap the table in some containing element like a <div>, and make sure the <div> has height, width, and overflow specified correctly so the table can be scrolled if it is too large for its container.

4. Add classes to the cells that you want to stick in place.

   .sns---is-stuck

   Ensures the cell does not move at all when scrolled, in either vertical or horizontal directions

   .sns--is-stuck-x

   Cell can be scrolled vertically, but not horizontally

   .sns--is-stuck-y

   Cell can be scrolled horizontally, but not vertically

In your javascript:

5. Install Stick-n-Slide npm install stick-n-slide.

6. Import Stick-n-Slide into your codebase import stickNSlide from 'stick-n-slide'.

7. Get a reference to your table(s), either via native JS or jQuery.

   Example:

   // Native JS
   const tableElements = document.querySelectorAll('.my-tables');
   
   // jQuery
   const tableElements = $('.my-tables');
   

8. Call stickNSlide(tableElements) on the tables whose cells you want to stick in place.