Smart Sticky Footer (Bottom Banner) With jQuery - rib.js

rib.js is a lightweight yet highly customizable jQuery plugin to create a smart, sticky, user-friendly footer banner at the bottom of the webpage.

Intended for Cookie/GDPR consent bar, site navigation bar, app bottom sheet, notification bar, sticky bottom ads, special offer bar, and much more.

More Key Features:

• Temporarily displays the footer until a date you specify.
• Uses cookies to persist between pages or visits.
• Auto dismisses itself after an amount of scrolling in pixels.
• Auto disables the footer on specified pages.

How to use it:

1. Load the rib.js script after loading the latest jQuery library.

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

2. Load content into a constant using backticks to make HTML formatting easier.

const ribbonContent = `
  <a href="#myLink" id="acceptOffer">
    <p class="rib__text">This is a bottom banner <span class="rib__cta" style="font-weight: bold;">See Details</span></p>
  </a>
`;

3. Initialize the rib.js plugin and done.

ribPlugin.rib({
  content: ribbonContent,
  dismissId: 'acceptOffer', // ID for element that will dismiss Rib on engagement
});

4. Customize the appearance of the bottom banner.

ribPlugin.rib({
  content: ribbonContent,
  maxWidth: 1920, // auto disable when the screen is larger than 1920px
  backgroundColor: '#2b2b2b',
  fontFamily: 'sans-serif',
  fontColor: '#ffffff',
  fontSize: '1em',
  lineHeight: '1.25',
  deskFontSize: '1.25em',
  xColor: '#ffffff' // Color of 'X' dismiss button
});

5. Auto hide the bottom banner when reaching a specific date.

ribPlugin.rib({
  content: ribbonContent,
  endDate: 'November 2 2020 23:59:00 GMT-0700'
});

6. Config the cookie persistence.

ribPlugin.rib({
  content: ribbonContent,
  cookieName: 'myRibCookie',
  cookieExpire: 30, // 30 days
});

7. Specify the pages to exclude if their URL includes these strings.

ribPlugin.rib({
  content: ribbonContent,
  urlExclude: ['blog/','cart/']
});

8. Determine the time to wait before showing the bottom banner. Default: 0.

ribPlugin.rib({
  content: ribbonContent,
  delay: 3 // 3 seconds
});

9. Determine whether to auto dismiss the bottom banner after this amount of scrolling in pixels, in either direction.

ribPlugin.rib({
  content: ribbonContent,
  scrollDismissAmount: 600
});

10. Customize the CSS class of its wrapper element.

ribPlugin.rib({
  content: ribbonContent,
  wrapper: 'class="myRib"'
});

11. Determin an array of classes to watch to avoid overlap.

ribPlugin.rib({
  content: ribbonContent,
  fixOverlappingClasses: ['annoying','doubleannoying']
});

---

This awesome jQuery plugin is developed by brandonbews. For more Advanced Usages, please check the demo page or visit the official website.