PRODUCT
Follow

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.

StickyScrollerDemo.gif

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.

  main.png

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.

 adhesion.png

Demos/Downloads

The following table provides links to the templates and demo for the Sticky Scroller format.

Template

Demo

Preview 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

index.html

The banner markup file that is displayed on page.

panels/expand/index.html

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

styles/reset.css

A style sheet that overrides browser default styles.

styles/style.css

Style sheet for banner creative.

panels/expand/styles/style.css

Style sheet for desktop panel creative.

 Scripts

The following JavaScript template files are included.

File Name

Description

scripts/localPreview.js

local preview support file.

scripts/script.js

Script file for banner to load and initialize banner creative.

panels/expand/scripts/script.js

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

images/backup.jpg

backup image for banner.

images/Sizmek_logo_RGB_White.svg

logo image

panels/expand/images/

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

scrollYPercent

Value in percentage, Indicate the Panel vertical visibility related to viewport area.

scrollXPercent

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,
CSS Selector,
pixel values
percentage values
fixed positions

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,
mdAdhesionWidth,
mdAdhesionHeight 

adaptive

Sets fixed width and height 

See:

mdAdhesionWidth
mdAdhesionHeight 

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

  1. Archive the Sticky Scroller workspaces into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX, under Creative Assets, create new Workspace by uploading the ZIP file.
  3. Under the Ads section, create ad use the workspace you have uploaded.
  4. 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 
  1. 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”.
  2. Save the Ad.
  3. Under the Advanced Features section, customize the Variables to your needs.
  4. Create a new placement for the Ad.
  5. 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: 

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

  1. WinZip, 7Zip, or another archiving program.
  2. Click Creative > Asset Library, Upload your Workspace the chosen folder.
  3. Click Creative > Ads and click the New Ad and select Blank Ad.
  4. Select the workspace location and all the details will be auto filled.
  5. Under the Advanced Features section, customize the Variables to your needs.
  6. Create a new placement for the Ad.
  7. Fill out the form. Set the Placement type to In Banner and the Banner size to 500x280
  8. 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

clickthrough fired once user clicks on the ClickThrough button in banner and clicks on the entire panel.

CustomInteraction

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. 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments