Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Sticky Scroller.
When creating a Sticky Scroller in a code editor, it is recommended that you start with our official template.
Workspace |
Video |
Banner Dimension |
Default Panel Dimension |
|---|---|---|---|
Yes |
500 x 280 |
500 x 280 |
|
Yes |
300 x 168 |
300 x 168 |
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.
The following table describes the list of files that are included in the downloadable template.
File Name |
Description |
Required |
|---|---|---|
|
HTML file for the banner. |
Required |
|
Panel markup file. Contains all the panel creative assets and script essential to display and support panel functionality. |
Required |
|
Configuration/manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative. |
Optional |
|
Resets the native styles of the browser so that the ad can look as intended. |
Optional |
|
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. |
Required |
|
JavaScript (logic and tracking) for the expanded panel of the banner. |
Required |
|
Script that enables local preview of the ad. |
Optional |
|
Fallback image shown in unsupported browsers. |
Required |
The following table describes the additional files that are included in a video template.
File Name |
Description |
Required |
|---|---|---|
|
Settings file that contains key variables used to make customizing the template easier. Sticky Scroller includes an autoPlayVideo variable that you can customize in the settings. This variable is only applied to the templates that include video. |
|
|
Temporary video that you should replace with your own video. |
Required |
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.
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
Click-through button (90 x 25)
User action button (90 x 25)
Script that is used to initialize the ad and handles panel expansion logic (500 x 280)
You can update the layout and design of the panel in the expand folder located in the
index.htmlfile,panels/expand/index.html.To add or remove creative elements, update the
index.htmlfile.
The panels/expand/index.html includes the following:
Panel creative assets
Close button
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 |
Description |
|---|---|
|
Indicates the panel's vertical visibility related to viewport area.Value is a percentage. |
|
Indicates the panel's horizontal visibility related to viewport area. Value is 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. |
|
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 |
Description |
|---|---|
|
Checks to see if the AdKit is ready, and then proceeds to initialize creative. |
|
Test ad locally. |
|
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, |
|
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 |
|
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. |
Description |
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 |
|
ProgEnable ( |
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 Accepted:
|
|
Max Banner Width ( |
Max banner width when |
Default: 500 Accepted: Any positive integer |
|
Max Banner Height ( |
Max banner height when |
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)
|
|
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 Accepted:
|
|
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 Accepted:
|
|
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. |
The following sections describes common customizations for the Sticky Scroller.
Setting the mdPanelAnchor custom variable determines the placement of the sticky panel. This table describes the various fixed locations for panel placement.
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) |
100 px,100 px |
Fixed percentage (Viewport Relative) |
50%, 50% |
Fixed to page element using CSS selector (Page relative) |
#headline |
Setting the mdAdhesionResizeStyle custom variable determines the way in which the sticky panel will be sized. This table describes the 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 the following custom variables:
|
matchBanner |
|
Sets a fixed width and height. See the following custom variables:
|
fixed |
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 |
default |
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 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
Comments