Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Sticky Scroller.

Create an Ad Using a Sizmek Ad Suite Template

When creating a Sticky Scroller in a code editor, it is recommended that you start with our official template bundle.

Files within the Bundle:


Download the template and then select the desired folder from the list of available dimensions and options.

You can customize the dimensions according to your requirements. In addition, you can customize the panel, by using the mdAdhesionWidth and mdAdhesionHeight variables.

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name




HTML file for the banner.



Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.



Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)


Style sheet for desktop panel creative.

Optional (if code is included in the HTML file)


JavaScript (logic and tracking) for the banner.



JavaScript (logic and tracking) for the expanded panel of the banner.



Fallback image shown in unsupported browsers.



Logo for your ad.



This folder contains all files related to panel and its creative assets.



HTML file for the panel.



This folder contains the image assets for the scroll panel.



Temporary video that you should replace with your own video.

Required for video format

Setting up Your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up a Sticky Scroller.

The config.js file includes the manifest ad data. This file contains metadata used to configure the ad in SAS during the upload. For more information about the manifest files, see Manifest Ad Data.

Additional Resources

Customize Banner Assets

You can update the layout and design of the banner, and add creative elements other than static images in the index.html file.

The index.html file includes the following:

  • Banner creative assets

  • Script that is used to initialize the ad and handles panel expansion logic (500 x 280)

Customize Panel Assets

  • You can update the layout and design of the panel in the expand folder located in the index.html file, panels/expand/index.html.

  • To add or remove creative elements, update the index.html file.

The panels/expand/index.html includes the following:

  • Panel creative assets

  • Close button

  • User action button

  • Click-through button

  • Script that is used to handles panel expansion logic

The Header section of the index.html loads essential CSS styles, and the EBloader scripts file, panels/expand/script/script.js. This file is a core panel script, and is responsible for initializing the panel, and displaying it when all of the assets are loaded.

With the scroll event, the user will get an additional variable with messageData that contains information related to the panel's viewport area visibility.


The following tables provide additional variables that are available for this format. You can use these additional items to fully customize your ad.

Variable Name



Indicates the panel's vertical and horizontal visibility related to viewport area.It has properties of 'x' and 'y'. The values are in a percentage.


Global variables that are used for defining the HTML objects later.

You can add/edit/remove the variables if modifying the HTML objects. You can use this variable to control the display of the Close button in MRAID, where a Close button is already present by default.

  • adId

  • rnd

  • uid

  • sdkData

  • expansionDiv

Used to store values that are necessary when running the ad. Do not make changes to these variables.


The following table provides additional functions that are available for this format. You can use these additional items to fully customize your ad.

Function Name



Checks to see if the AdKit is ready, and then proceeds to initialize creative.


Initiate the close button coresponding to the closing call from MRAID.


Initializes the creative.

You can add your own script if you want to run a script when the creative is initialized.


Initializes the global variables for HTML objects. In the template, positionAdElements is also called to position the ad elements.


Adds all of the event listeners. In the template, the click event for the click-through and user action counter was added. In addition, the webkitendfullscreen event listener for iOS devices was added in order to handle some positioning issues when exiting the full screen video player.


Invoked to close the panel, and enable the page scrolling before the ad is collapsed. This function also pauses the video.


Click handler for the click-through button. Calls this function for the default click-through. This function also pauses the video.


Call this function to get ScrollX and ScrollY percentage.


Invoked to change the visibility of the panel.


Called when the panel is completely shrunk down.


Called when the panel is entiely expanded.

Custom Variables

Variable Name in SAS

(Variable Key in config.js)


Default and Accepted Values

Eye Div ZIndex


Sets eyeDiv (panel container) z-index dynamically.

Default is undefined, meaning, there are no changes to eyeDiv (panel container) z-Index.

Default: Undefined

Accepted: Any integer (positive or negative)

Auto Reposition Interval


Interval amount, in milliseconds, to reposition the panel on expand.

Default: 0

Accepted: Any positive integer



Boolean variable used to enable or disable the format for programmatic functionality.

Default: false

Accepted: true/false

Prog Settings FolderPath


Path to store the settings file on the server,

Default: //

Accepted: Valid server path as a string

Banner Size Inheritance


Determines whether the banner size inherits from the publisher ad container size or browser width.

Default: default


  • default

  • publisherContainerSize

  • browserWidth

Max Banner Width


Max banner width when mdBannerSizeInheritance is set to publisherContainerSize.

Default: 500

Accepted: Any positive integer

Max Banner Height


Max banner height when mdBannerSizeInheritance set to publisherContainerSize.

Default: 250

Accepted: Any positive integer

Adhesion Visibility Timeout


Determines the amount of time, in milliseconds, the adhesion panel is visible if the user does not interact with the ad.

Default: 0

Accepted: Number in Milliseconds

Visibility Threshold


The threshold visibility of the banner to show the sticky panel upon scroll away.

Default: 0

Accepted: Integer (-1 to 100)

  • -1 will always displays the sticky panel

  • 100 will always show the banner

Adhesion Width


Determines the width of the sticky panel; multiple values can be entered when in adaptive mode.

Default: 300

Accepted: Any positive integer

Adhesion Height


Determines the width of the sticky panel; multiple values can be entered when in adaptive mode.

Default: 170

Accepted: Any positive integer

Panel Breakpoints


Sets the breakpoint widths, when using adaptive mode.

Default: 300

Accepted: Any positive integer

Adhesion Resize Style


Sets the size of the sticky panel, according to various customizations.

Default: fixed


  • fixed

  • adapative

  • matchBanner

  • css selector

Full Width


Determines whether adhesion panel will be full width.

Default: No

Accepted: Yes/no

Hide Banner


Determines whether to hide the banner from view. If set to Yes, the panel will display in the banner position.

Default: Yes

Accepted: Yes/no

Transition Effect


Transition easing type and duration.

Default: easeOutCubic, 2000

Accepted: String – easing effect, Duration in milliseconds

Full Width


If set to Yes, the sticky panel width will be 100% of the viewport width.

Default: No

Accepted: Yes/No

Panel Anchor


Determines the position the panel will display, when in the sticky state.

Default: fixed


  • Default

  • CSS Selector

  • pixel values

  • fixed positions

Use Animator


Determines whether to use the built-In client animator.

Default: false

Accepted: Setting to true will use the built in client animator functionality instead of then the custom script.


This variable is only used when the ad is serving a default image.

When set to any value over 0, the number of publisher parent elements of our tag resizes to the default image size, if they are smaller than the default image serving.

Default: 0

Accepted: Set the parent level.


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 320 x 50, even though the tag is a 320 x 50 tag.

For example, if this custom variable is set to images/970x250_Default.jpg, a file will attempt to load from the images folder. You must be sure this file exists in the Workspace.

Default: Undefined

Accepted: Valid relative path to an image resource.

Customizing the Sticky Scroller

The following sections describes common customizations for the Sticky Scroller.

Placement of the Sticky Panel

Setting the mdPanelAnchor custom variable determines the placement of the sticky panel. This table describes the various fixed locations for panel placement.



Fixed to bottom left (Viewport Relative)


Fixed to bottom right (Viewport Relative)


Fixed to bottom center (Viewport Relative)


Fixed to top left (Viewport Relative)


Fixed to top right (Viewport Relative)


Fixed to top center (Viewport Relative)


Set the Size of the Sticky Panel, and Adaptive and Responsive Behavior

Setting the mdAdhesionResizeStyle custom variable determines the way in which the sticky panel will be sized. This table describes the options.



Sets the sticky panel to the size of the banner.


Sets the size of the sticky panel according adaptive window size determined by breakpoints.

See the following custom variables:

  • mdPanelBreakpoints

  • mdAdhesionWidth

  • mdAdhesionHeight


Sets a fixed width and height.

See the following custom variables:

  • mdAdhesionWidth

  • mdAdhesionHeight


Sets the dimensions of the sticky panel to the size of an element on the page.

CSS selector (for example, #headline)

Sets the adhesion panel width to 300 px and the adhesion panel height to 180 px


Setting the mdFullWidth custom variable sets 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.

Set the Transition Effect and Duration

Set the custom variable mdTransitionEffect with two values:

  • The first value is the transition.

  • The second value is the duration, in milliseconds.

For example, setting mdTransitionEffect to easeOutCubic , 2000 uses the easeOutCubic transition to animate the sticky panel. This transition will finish in 2000 miliseconds. For a complete list of transitions, click here.

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

Start the Ad in the Sticky Panel State

Setting the mdVisibilityThreshold custom variable to -1 starts the ad experience from the sticky panel state.


Click here to preview a demo of Sticky Scroller format.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request