Creating Stick Element To Bottom Of Its Parent | fixedElemScroll

jquery-fixed-element-scroll

fixElemScroll is a small, multi-browser jQuery Sticky plugin that makes an item always stay at the bottom of the page until you scroll through its main container. Great for the sticky sidebar, floating social sharing tape, static bottom ads, and more.

What do you do, or what do you do?

If the image needs to be stuck to the bottom of the page, they usually use Position: Fixed. But what if he only needs to stick to the bottom of the page while he’s inside the main item and while the parent’s Y offset is inside the viewport?

In other words, if the user scrolls past the parent, the image element should stick to the bottom of the parent (i.e. position: absolute, bottom: 0), and if the user scrolls to the top of the page, then the image element needs to stay on its parent’s head (i.e. Position: fixed).

Must Read: A Simple, Usable jQuery Plugin To Make A Div Sticky | stickySidebar

How to make use of it:

1. Load the fixedElemScroll.jquery.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/fixedElemScroll.jquery.js"></script>

2. Make a component at all times seen inside its parent container.

<section>
  <div class="fixed-elem"></div>
</section>
$(function(){
  $('.fixed-elem').fixedElemScroll();
});

3. Fix the place into a different container.

$(function(){
  $('.fixed-elem').fixedElemScroll({
    $parent: $this.parent(),
  });
});

4. Set the distance from the bottom of the parent container.

$(function(){
  $('.fixed-elem').fixedElemScroll({
    bottom: 20
  });
});

See Demo And Download

Official Website(delibash): Click Here

This superior jQuery/javascript plugin is developed by delibash. For extra Advanced usage, please go to the official website.