Skip to main content

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="row">
                  <div class="col-md-8">
                    <div class="ex-content text-center py-9 border bg-light mb-5">
                      <p>Main content</p>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <aside class="sticky">
                      <div class="ex-sidebar text-center py-4 border bg-light mb-4">
                        <p>Sticky content</p>
                      </div>
                      <div class="ex-sidebar text-center py-4 border bg-light mb-4">
                        <p>Sticky content</p>
                      </div>
                    </aside>
                  </div>
                </div>
              </section>

For complete documentation read in here