diff --git a/examples/gallery/contents/ui/gallery/ListViewGallery.qml b/examples/gallery/contents/ui/gallery/ListViewGallery.qml
--- a/examples/gallery/contents/ui/gallery/ListViewGallery.qml
+++ b/examples/gallery/contents/ui/gallery/ListViewGallery.qml
@@ -18,6 +18,7 @@
  */
 
 import QtQuick 2.0
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.2
 import org.kde.kirigami 2.0 as Kirigami
 
@@ -68,12 +69,26 @@
         }
     }
 
+    flexibleHeader: Item {
+        implicitHeight: 100
+
+        Label {
+            anchors.fill: parent
+            text: page.title
+            fontSizeMode: Text.Fit
+            minimumPointSize: 10
+            font.pointSize: 50
+            horizontalAlignment: Text.AlignRight
+        }
+    }
+
     ListView {
         Timer {
             id: refreshRequestTimer
             interval: 3000
             onTriggered: page.refreshing = false
         }
+
         model: 200
         delegate: Kirigami.SwipeListItem {
             id: listItem
diff --git a/src/controls/ScrollablePage.qml b/src/controls/ScrollablePage.qml
--- a/src/controls/ScrollablePage.qml
+++ b/src/controls/ScrollablePage.qml
@@ -102,21 +102,48 @@
      */
     property bool keyboardNavigationEnabled: true
 
-    RefreshableScrollView {
-        id: scrollView
-        z: 0
-        //child of root as it shouldn't have margins
-        parent: root
-        topPadding: (applicationWindow() && applicationWindow().header ? applicationWindow().header.preferredHeight : 0) + (contentItem == flickable ? 0 : root.topPadding)
-        leftPadding: contentItem == flickable ? 0 : root.leftPadding
-        rightPadding: contentItem == flickable ? 0 : root.rightPadding
-        bottomPadding: contentItem == flickable ? 0 : root.bottomPadding
-        anchors {
-            fill: parent
-            topMargin: root.header ? root.header.height : 0
+    /**
+     * flexibleHeader: Component
+     *
+     * Adds a header for the view whose height depends on whether the flickable
+     * is at the top or not.
+     *
+     * If it's at the top it will be shown at the component's implicitHeight,
+     * otherwise it will be squeezed into a field of Units.largeSpacing*2
+     * height.
+     *
+     * @since 2.1
+     */
+    property alias flexibleHeader: headerLoader.sourceComponent
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        Loader {
+            id: headerLoader
+            Layout.fillWidth: true
+            visible: item
+
+            function boundHeight(min, scrolledDistance, max) {
+                return Math.max(max-scrolledDistance, min)
+            }
+
+            Layout.preferredHeight: item && scrollView.flickableItem ? boundHeight(Units.largeSpacing*2, scrollView.flickableItem.contentY/2, item.implicitHeight) : 0
+        }
+        RefreshableScrollView {
+            id: scrollView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            z: 0
+            Layout.topMargin: root.header ? root.header.height : 0
         }
     }
 
+    topPadding: (scrollView.contentItem == flickable ? 0 : Units.gridUnit) + (applicationWindow() && applicationWindow().header ? applicationWindow().header.height : 0)
+    leftPadding: scrollView.contentItem == flickable ? 0 : Units.gridUnit
+    rightPadding: scrollView.contentItem == flickable ? 0 : Units.gridUnit
+    bottomPadding: scrollView.contentItem == flickable ? 0 : Units.gridUnit
     anchors.topMargin: 0
 
     Keys.onUpPressed: {