Trigger: Scroll -- Introduction

Overview

This extension provides users with a Scroll trigger to display a popup when visitors reach or pass a specific point on the screen. The trigger can be set to display a popup based either on vertical scroll distance or encounter with either a shortcode or HTML page element. 

Distance option units include: 

  • percent ( % ), 
  • pixels ( px ), or 
  • rem. 

The latter unit ( 'rem' ) is based on the relative font-size set in a site's stylesheet. 

Element settings detect for either an embedded shortcode or CSS selector added to the content of a post, page, or custom post type. The shortcode is registered by Popup Maker and must be added within the post, page, or custom post type editor. 

The CSS Selector method detects HTML attributes embedded in a post or page in the same way as the Extra CSS Selectors method used by the Click Open trigger.  See the related article link below for an introduction on the use of that method.

Related article:  Trigger: Click Open -- Use Existing or Custom Selectors to Set a Trigger

Popups can be configured to remain open (default) when scrolling back up, or to close when the trigger point is passed. 


Article Contents


Setup the Trigger

Add New Trigger

1.  In the Popup Editor, go to the 'Popup Settings' box -> 'Triggers' option tab, and select the 'Add New Trigger' button.  

2.  A popup box labeled 'Choose what type of trigger to add?' will appear. Select the ‘Scroll’ option, then select the 'Add' button.

[ Back to top ]

Cookies control the repeated display of popups in the browser. To work, they must be set  and linked to a popup trigger. 
If you want the scroll trigger popup to always display, then do not set nor link a cookie to the trigger
If you want to control the repeat display of the scroll trigger popup, then follow the instructions in this section for the cookie setup.
Related article:   'Cookies' option settings // Go to the section: 'Set and Link a Cookie When Adding a New Trigger'.

3.  Select the checkbox labeled 'Would you like to set up a cookie as well?' to set and link the trigger to a cookie. 

4.  The plugin will prompt with a new option menu labeled  'When should your popup be created?'.  The plugin default option is set to 'On Popup Close', with four (4) additional option settings available. 

Either accept the plugin default, or select a different option. Click the button labeled 'Add' to proceed to the next step. 

[ Back to top ]

Confirm Cookie Setting in the Scroll Trigger Settings box

5. The option field labeled 'Cookie Name' should contain a cookie ID formatted as 'pum-{integer}'. In the screenshot shown above, the plugin assigns the cookie an ID of 'pum-450'. 
6. Accept the cookie ID by selecting the 'Add' button in the lower right corner. 

7.  In the 'Popup Settings' box, the ‘Scroll’ trigger and ‘On Popup Close’ cookie are now linked by the cookie ID set in the Scroll Trigger Settings box.

[ Back to top ]


Scroll Trigger Settings box

The Scroll trigger and a cookie are now linked. But the remaining trigger options are not yet set. Let's edit the trigger and review the available option settings. 

On the Triggers option tab of the Popup Settings box, select the pencil icon in the Actions column.  This will open the Scroll Trigger Settings box where the remaining options settings will be reviewed. 

‘General’ option settings tab

Distance

The Distance option sets the Scroll trigger to display a popup when a visitor vertically scrolls a preset distance down a page. 

Plugin default value: 75% 

Distance (units): pixels (px)  |  percent ( % )  |  rem  // default units: percent ( % )

Enter the desired value in the input field. On focus, the input field displays a set of up/down arrows that increment the entered value by +/- 1.  Focus and click the units menu to view the options and choose between them. 

[ Back to top ]


Element

The Element option sets a Scroll trigger to display a popup when a visitor scrolls to or beyond a targeted page element. The element can either target a Popup Maker shortcode, or a CSS or jQuery selector.  CSS selectors can target any class or id attribute added to an HTML element or tag.  The targeted shortcode or selector must be added to the content of a post or page.  

Unlike other Popup Maker shortcodes, the Scroll Trigger Point shortcode ( tag: [pum_scroll_trigger] ) must be added into the content editor of a page, page, or custom post type registered with WordPress.  The shortcode is not available in the Popup Editor.

Related article:  Shortcode: Scroll Trigger Point

To learn more about the Popup Maker shortcode button in the WordPress editor, see the related article below.

Related article: Shortcode Button

[ Back to top ]

When Should the Popup Trigger?

The Element option provides users with 4 different options to display a scroll trigger popup. Each option is demonstrated in the next section.

What Type of Element Do You Want to Use as a Trigger Point?

Users can select from 2 options; Shortcode, or CSS Selector.

Shortcode

See the following related article to set the Scroll Trigger Point shortcode in the editor of a post, page, or custom post type.

Related article:  Shortcode: Scroll Trigger Point

CSS Selector

Each Element option is demonstrated below in 4 separate videos ( run time: 4 - 10 seconds each ).  The Popup Maker icon was added to some dummy page content on a test site.  An HTML class of popup-maker-icon was added to the icon's <img> tag ( <img class="popup-maker-icon" src="icon-file.png"> ).  A Scroll trigger was set to an 'Element' option targeting the  .popup-maker-icon CSS selector. 

'Element' option demonstration videos

1.  When the element first comes on screen

2.  When the element has been completely revealed

3.  When the element begins to scroll off screen; and 

4.  When the element has completely scrolled off screen

For guidance on how to use CSS Selectors when setting a trigger, see the related article below.

Related article:  Trigger: Click Open -- Use Existing or Custom Selectors to Set a Trigger

[ Back to top ]

Close When Scrolling Back Up (Checkbox)

Default: unchecked.  By default, the popup will remain open in the browser when a visitor scrolls back up the page. To close the popup on an upward vertical scroll past the popup trigger point, set the checkbox to ‘checked’.

The next video demonstrates a Scroll popup configured with the following settings:

  • Type of scroll trigger: Element;
  • Popup triggers when: Element completely scrolled off screen;
  • Type of element used at trigger point: CSS Selector; 
  • Close when scrolling back up: Yes; and 
  • Disable Overlay: checked (enabled). 

To disable the popup overlay (background) layer, go to: ' Popup Settings' box >> 'Display' tab >> 'Advanced' category >> 'Disable Overlay' checkbox. 

Related video: Show or hide popup when scrolling past page element.

See the previous section 'Link the Trigger to a Cookie'.

[ Back to top ]


The Scroll Trigger in Action 

The following video demonstrates the use of a Scroll trigger popup to display a banner-style popup that contains an email signup form.

Learn to create a banner-style, high conversion popup using the Scroll trigger extension.

Related article:  Banner Style Popup for Opt-Ins Creation Guide

[ Back to top ]