Show Element Based On Scroll Position Or Time On Page - jQuery showElement

showElement is a jQuery plugin that provides a simple way to show an element on your webpage based on the user's scroll position or the amount of time they've spent on the page.

With the plugin, you can show a popup window (as shown below) after a certain number of seconds, or when the user scrolls to a specific point on the page. Useful for displaying calls to action, promotional banners, email subscription forms, or other important content you want to ensure your visitors see.

In addition, it also uses browser cookies to store the state of the element being closed by the user, to ensure that this element does not reappear on the next visit until the cookies expire.

How to use it:

1. To get started, download the plugin and include the jquery.showelement.min.js after jQuery.

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

2. Use the plugin to create a popup window that will be displayed 5 seconds after the user visits this page.

<div class="popup js-popup is-hidden">
  <div class="popup-content">
    <div class="popup-close js-close">Close</div>
    A Sample Popup
  </div>
</div>

/* hide the popup on page load */
.is-hidden {
  display: none;
}

$(document).ready(function() {
  $('.js-popup').showElement({
    activation: 'time',
    timeActivation: 5000, // default: 0
  });
});

3. Display the popup window when the user scrolls down 50% of the body height.

$(document).ready(function() {
  $('.js-popup').showElement({
    activation: 'scroll',
    scrollPosition: 50, // default: 100
  });
});

4. Config the cookies.

$(document).ready(function() {
  $('.js-popup').showElement({
    cookieName: 'showElement',
    cookieDuration: 365, // 1 year
  });
});

5. Override the default CSS classes.

$(document).ready(function() {
  $('.js-popup').showElement({
    closeClass: 'js-close',
    hideClass: 'is-hidden', 
    showClass: 'is-visible'
  });
});

6. Events.

$('.js-popup').on( 'showElement', function( event ) {
  // do something
});

$('.js-popup').on( 'hideElement', function( event ) {
  // do something
});

---

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