Introduction
Overview
The Sticky Scroller format is comprised of an in-page banner and a “sticky” panel. When the user scrolls the page, and the in-page banner goes outside of the view-port, the sticky panel will animate to and stick to the pre-defined position on the page - set by use of custom variables.
Once in the sticky state, the panel will remain in position until the user scrolls the in-page banner back in view, which will position the sticky panel back to its original position - atop the in-page banner.
Users can close the sticky panel on close button and it will no longer go into the sticky position when scrolling the banner out of view, remaining on it's original in-page position.
If the video template is used, and the video is playing on the page, it will pause when scrolled out of view and resume playing again when scrolled back into view.
Default size of the sticky panel is 300x180, however most customization's will include different dimensions, those can be set using custom variables - mdAdhesionWidth, mdAdhesionHeight.
The Sticky Scroller supports both adaptive and responsive behaviors and can be customized to suite a number of different setting to suite different advertiser needs and publisher requirements.
Sticky Scroller states:
In-page 500x280 Sticky Scroller while in view-port.
As the user scrolls away from the banner unit, a sticky panel will come into view.
The following image shows the sticky panel aligning to the bottom-right corner of the page.
Demos/Downloads
The following table provides links to the templates and demo for the Sticky Scroller format.
Template |
|
Demo |
Workspaces Available
WORKSPACE |
VIDEO |
BANNER DIMENSION |
DEFAULT PANEL DIMENSION |
CIT_RELEASED_StickyScroller_1.1.0_500x280_Video.zip |
Yes |
500x280 |
500x280 |
CIT_RELEASED_StickyScroller_1.1.0_300x168_Video.zip |
Yes |
300x168 |
300x168 |
HTML
Supported Platforms
Platform |
Supported Version |
Internet Explorer |
11.0 and later |
iOS |
iOS 10 and later |
Android |
Android 6 and later |
MS Edge |
42.X and later |
Firefox |
Recent versions |
Chrome |
Recent versions |
Safari (Mac) |
9.0 and later |
Format Properties
Listed below are common properties available to the format.
Feature | Supported |
Polite Loading | ✓ |
Safeframe Support | ❌ |
AdKit ready 1 | ✓ |
Secure Serving | ✓ |
Sizmek Advertising Suite Support | ✓ |
Ad Builder Templates Available | ❌ |
1 Allows for DCO Support as well as Additional Assets.
Implementing Sticky Scroller Using Workspaces
The following HTML5 template files are included.
File Name |
Description |
|
The banner markup file that is displayed on page. |
|
Panel markup file. Contains all the panel creative assets and script essential to display and support panel functionality. |
CSS
The following CSS template files are included.
File Name |
Description |
|
A style sheet that overrides browser default styles. |
|
Style sheet for banner creative. |
|
Style sheet for desktop panel creative. |
Scripts
The following JavaScript template files are included.
File Name |
Description |
|
local preview support file. |
|
Script file for banner to load and initialize banner creative. |
|
Core script file to panel to load and initialize panel creative. |
Images
The following image template files included in the images folder.
File Name |
Description |
|
backup image for banner. |
|
logo image |
|
logo image |
Customizing Banner Assets
To update the layout, design of banner, open index.html
file.
index.html
If you want to add additional creative elements other than static images then you need to update index file. The index file holds:
- Banner creative assets.
- Clickthrough button (90x25).
- User Action button (90x25).
- Contains a script that is used to initialize the Ad and handles panel Expansion logic(500x280).
Customizing Panel Assets
To update the layout, design of panel, open index.html file located in expand folder.
panels/expand/index.html
If you want to add or remove creative elements then you need to update index file.
This file holds:
- Panel creative assets.
- Close Button.
Header section of index.html
loads essential CSS styles, EBloader scripts file.
panels/expand/script/script.js
This file is a core panel script. It's responsible for initializing panel, and displaying it when all the assets are loaded. With scroll event, the user will get an additional variable with messageData
that contains information related to panels view-port area visibility
Variable Name |
Description |
|
Value in percentage, Indicate the Panel vertical visibility related to viewport area. |
|
Value in percentage, Indicate the Panel horizontal visibility related to viewport area. |
Variables
Variable Name |
Description |
closeButton |
Global variable(s) that will be used for defining the HTML objects later. You may add/edit/remove the variable(s) if modifying the HTML objects. |
adId, rnd, uid, expansionDiv |
These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables. |
Functions
Function Name |
Description |
checkIfAdKitReady |
Check to see if the Adkit is initialized and then proceed to initialize creative. |
initializeLocalPreview |
This is the function to test ad locally. |
initializeCreative |
Initialize creative. You may add your own script here if you wish to execute a script when the creative is initialized. |
initializeGlobalVariables |
This is where we initialize the global variables for HTML objects in the template. |
addEventListeners |
This is where we add all the event listeners. In the template, we have added the click event to the click through button, |
handleClickthroughButtonClick |
Call this function for the default click-through in retracted state. |
handleCloseButtonClick |
Call this function to close the default panel. |
onPageScroll |
Call this function to get ScrollX and ScrollY percent |
Custom Variables
MDX |
DESCRIPTION |
DEFAULT VALUE |
ACCEPTED VALUES |
mdEyeDivZIndex (Eye Div ZIndex) |
Dynamically set eyeDiv (panel container) z-index through this variable, default is undefined so no changes will happen to eyeDiv (panel container) z-Index |
undefined |
any integer (positive or negative) |
mdAutoRepositionInterval (Auto Reposition Interval) |
Interval amount in milliseconds to reposition the panel on expand |
0 |
any positive integer |
mdIsDomainConfigEnabled (ProgEnable) |
Boolean variable used to enable or disable the format for programmatic functionality.
|
false |
true / false |
mdProgSettingsFolderPath (Prog Settings Folder Path) |
path to store the settings file on the server |
"//services.serving-sys.com/programmatic/DomainList/" |
Valid server path as a string |
mdBannerSizeInheritance (Banner Size Inheritance) |
Option for making banner size inherite from the publisher ad container size or browser width. |
default |
default, publisherContainerSize, browserWidth. |
mdMaxBannerWidth (Max Banner Width) |
Max banner width when mdBannerSizeInheritance set to publisherContainerSize |
500 |
any positive integer |
mdMaxBannerHeight (Max Banner Height) |
Max banner height when mdBannerSizeInheritance set to publisherContainerSize. |
250 |
any positive integer |
mdAdhesionVisibilityTimeout (Adhesion Visibility Timeout) |
This will determine the amount of time in milliseconds the adesion panel will be visible if the user does not interact with the ad. |
0 |
Number in Milliseconds |
mdVisibilityThreshold (Visibility Threshold) |
The threshold visibility of the banner to show the sticky panel upon scroll away |
0 |
integer (-1 to 100) -1 will always displays the stickey panel 100 will always show the banner |
mdAdhesionWidth (Adhesion Width) |
This variable is used to determine the width of the sticky panel , multiple values can be entered when in adaptive mode |
300 |
any positive integer numbers |
mdAdhesionHeight (Adhesion Height) |
This variable is used to determine the width of the sticky panel , multiple values can be entered when in adaptive mode |
170 |
any positive integer numbers |
mdPanelBreakpoints (Panel Breakpoints) |
Set the breakpoint widths. When using adaptive mode |
300 |
any positive integer numbers |
mdAdhesionResizeStyle (Adhesion Resize Style) |
Set the size of the sticky panel accorindg to various customizations |
fixed |
Fixed,adapative, matchBanner, css selector
|
mdFullWidth (Full Width)
|
Adhesion panel will be full width |
No |
Yes / no |
mdHideBanner (Hide Banner) |
Hide then banner from view, the panel will display instead in the banner position |
Yes |
Yes /no |
mdTransitionEffect (Transition Effect) |
Transition easing type and duration
|
easeOutCubic, 2000 |
String – easing effect , duration in milliseconds |
mdFullWidth (FullWidth) |
if set to true the sticky panel width will be 100% of the viewport width |
No |
Yes/No |
mdPanelAnchor (Panel Anchor) |
position where the panel will display when in the sticky state |
fixed |
default, |
mdUseAnimator (Use Animator)
|
use built-In client Animator |
false |
setting to true will use the built in client animator functionality istead of then the custom script. |
mdParentLevelsToResize |
Only applied when serving default image. Affects the number of levels of parent elements to resize to the default image size. |
0 |
Set the parent level. |
mdBackupImgPath |
Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 320x50 even though the tag is a 320x50 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" | undefined | Valid image path |
Customizing the Sticky Scroller
Common Customizations
Placement of the sticky panel
Setting the mdPanelAnchor custom variable determines the placement of the sticky panel.
The panel can be placed by using the following fixed locations:
Description |
Usage |
Fixed to bottom left (Viewport Relative) |
bottom-left |
Fixed to bottom right (Viewport Relative) |
bottom-right |
Fixed to bottom center (Viewport Relative) |
bottom-center |
Fixed to top left (Viewport Relative) |
top-left |
Fixed to top right (Viewport Relative) |
top-right |
Fixed to top center (Viewport Relative) |
top-center |
fixed pixel location (Viewport Relative) |
100px,100px |
Fixed percentage (Viewport Relative) |
50%,50% |
Fixed to page element using CSS selector (Page relative) |
#headline |
Setting size of the sticky panel and adaptive and responsive behavior
Setting the mdAdhesionResizeStyle custom variable determines the way the sticky panel will be sized according to the following options.
Description |
Usage |
Sets the sticky panel to the size of the Banner |
matchBanner |
Sets the size of the sticky panel according adaptive window size determined by breakpoints. See: mdPanelBreakpoints, |
adaptive |
Sets fixed width and height See: mdAdhesionWidth |
fixed |
Sets dimensions of sticky panel to the size of an element on the page using CSS Selector |
CSS selector (eg. #headline) |
Sets the Adhesion panel width to 300px and the Adhesion panel height to 180px |
default |
Setting the mdFullWidth custom variable will set the width of the sticky panel to the width of the browser window. If used in conjunction with mdAdhesionResizeStyle = adaptive, the height breakpoints will still be respected.
Setting the Transition effect and duration
Setting the custom variable mdTransitionEffect with 2 values, the first value is the transion the second value is the duration in milliseconds.
Setting mdTransitionEffect to easeOutCubic , 2000
This will animate the sticky panel using the easeOutCubic transition and will be done in 2000 miliseconds.
The full list of available transitions are available on http://easings.net/
If the mdUseAnimator custom variable is set to true, the following CSS easing methods can be used in the mdTransitionEffect custom variable:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
Starting the Ad in the StickyPanel state
Setting the mdVisibilityThreshold custom variable to -1 will start the ad experience from the Sticky Panel state.
Setting up the Sticky Scroller in the Sizmek platform
Sizmek MDX setup
- Archive the Sticky Scroller workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- In the Sizmek MDX, under Creative Assets, create new Workspace by uploading the ZIP file.
- Under the Ads section, create ad use the workspace you have uploaded.
- Set Ad Format to Sticky Scroller and fill out the form.
Note: On the Sizmek Platform, your user account will need access to the Sticky Scroller format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format
- Add the panel to the Panels List. Choose the index.html file in the ‘panels/expand’ folder as the Creative Asset. Set the Dimensions to “500x280”, or whatever dimensions are required by your publisher. Set “Auto Retract When” to “Never” and “Position Type” to “Banner Relative”.
- Save the Ad.
- Under the Advanced Features section, customize the Variables to your needs.
- Create a new placement for the Ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 500x280.
After you’ve saved your placement, you can then generate preview tags to test on your web site.
Since the Time Sticky Scroller format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically. For reference, the following custom script is being used:
PL_StickyScroller.js
Sizmek Advertising Suite Setup
Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with
- WinZip, 7Zip, or another archiving program.
- Click Creative > Asset Library, Upload your Workspace the chosen folder.
- Click Creative > Ads and click the New Ad and select Blank Ad.
- Select the workspace location and all the details will be auto filled.
- Under the Advanced Features section, customize the Variables to your needs.
- Create a new placement for the Ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 500x280
- After you’ve saved your placement, you can then generate preview tags to test on your web site.
Custom Script Notice:
There is no need to attach a custom script since the appropriate one will be pulled in automatically if you select the format via the platform's Ad Setup. However for reference, the following custom script is being used:
PL_StickyScroller.js
Reported Custom Interactions
The following custom interactions are reported by the ad and can be reviewed in Sizmek reporting (besides standard ad interactions):
Interaction Name |
Description |
|
clickthrough fired once user clicks on the ClickThrough button in banner and clicks on the entire panel. |
|
User interaction fired once user clicks on UserAction button in banner. |
Change Log
August 17th, 2018 (v 1.1.0)
- SAS Manifest support added
- Minor bug-fixes & stability improvements
- Demo updated to newer branding/assets.
April 5th, 2018 (v 1.0.2)
- Chrome bug(v65): wrong position of the panel when it changes the position over the banner
- Improved the position of the panel when the animation starts
- Improved in IE when the animation starts
August 2 nd , 2017 (v 1.0.1)
- Change of format name from Adhesion Scroller to Sticky Scroller
- fluid video animation between banner and sticky states
- Improved handling of animation and breakpoints
- Improved handling of panel positioning and sizing
November 04th, 2016 (v 1.0.0)
- Initial Release
Known Issues
- There may be some jittery behaviour on some browsers while panel is in the transition state(animating) mainly observed on Safari and Edge Browsers
- On IOS mobile and tablet devices the grey play overlay button sometimes appears on its own when returning from animation
- When the ad is served on Samsung Native browsers only the Banner will display (no animation will occur and no sticky panel will display)
- on IE and Edge Browsers. page content may shift when animation is complete in the sticky state.
- Sometimes the close button may not appear on the sticky panel on first load
- Exiting fullscreen mode on IE11 may result in the animation running again.
- On Safari on Mac or iOS, the clickthrough button overlaps with the fullscreen button.
- If mdPanelAnchor set to a target, the adhesion panel reposition to its target div place after animation runs to the end.
- IE & Edge, intermittently adhesion panel blinks on scrolling down page.
- On iOS10, few pixels gap may appear at the bottom of Adhesion panel.
Comments