Contents

FadingStickyHeader

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

Declaration

object FadingStickyHeader

Properties

NameTypeDescription
fadeColorColor

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

Default value: #000000 (black)

type Requiredstring

Always fading_sticky_header for this scene type.

Mentioned in

Discussion

In the FadingStickyHeader scene, the header briefly “sticks” to the top of the screen as the person 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 define 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"
              }
            }
          ]
        }
      ]
    }
  ]
}

See Also

Scene Types