Object

FadingStickyHeader

The scene that briefly keeps a header at the top of the screen as the user scrolls through the article.

Properties

fadeColor

The color the header background will fade to, defined as a 3- to 8-character hexadecimal string or a color name string.

Default value: #000000 (black)

type
string
(Required)

Always fading_sticky_header for this scene type.

Discussion

In the FadingStickyHeader scene, the header briefly “sticks” to the top of the screen as the user scrolls down through the article (away from the header) as shown in this video.

You can use a fading_sticky_header with a Section or Chapter component that has a child header component. (The section or chapter component must contain a component with a role of header.) The header fades to the color you defined in the fadeColor property of the fading_sticky_header scene.

Example

{ "components": [ { "role": "section", "scene": { "type": "fading_sticky_header", "fadeColor": "#FFFFFF" }, "components": [ { "role": "header", "style": { "fill": { "type": "image", "URL": "bundle://header.jpg", "fillMode": "cover", "verticalAlignment": "top", "horizontalAlignment": "center" } }, "layout": { "minimumHeight": "75cw" }, "components": [ { "role": "title", "text": "Article Title", "textStyle": { "textAlignment": "center" } } ] } ] } ]}

Relationships

Inherits From

See Also

Scene Types

object Scene

A combination of animations and behaviors to use in sections and chapters that have headers.

object ParallaxScaleHeader

The scene that gives the impression of a parallax effect by zooming out and scrolling slightly more slowly than the user’s action.