HC Sticky

JavaScript library that makes any element on your page visible while you scroll. Dependency free, but lso works as a jQuery plugin.

Installation

Add script right before closing </body> tag, and initialize Sticky

                
                  <!-- Plugin js -->
                  <script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>

                  <!-- Theme js -->
                  <script src="src/js/theme.js"></script>

If you want to editing Hc sticky js, open file theme.js and edit this function mySticky();

How to trigger sticky

Add .sticky classes in your element

Example sticky

Main content

                
                  <section>
                    <div class="flex flex-wrap flex-row -mx-4">
                      <div class="flex-shrink max-w-full px-4 w-full md:w-2/3">
                        <div class="ex-content text-center py-48 border bg-light mb-6">
                          <p>Main content</p>
                        </div>
                      </div>
                      <div class="flex-shrink max-w-full px-4 w-full md:w-1/3">
                        <aside class="sticky">
                          <div class="ex-sidebar text-center py-6 border bg-light mb-6">
                            <p>Sticky content</p>
                          </div>
                          <div class="ex-sidebar text-center py-6 border bg-light mb-6">
                            <p>Sticky content</p>
                          </div>
                        </aside>
                      </div>
                    </div>
                  </section>

For complete documentation read in here