title: How to keep “SliverPersistentHeader” pinned to the top until item one of “SliverList” is reached after scrolling down?
body: <p>I am using SliverPersistentHeader with SliverList in CustomScrollView . I don't want my SliverPersistentHeader to come down until item one (index:0) of SliverList is reached. Even if I am at index 50 of sliverlist still header comes down as I scroll down. Is there any shortcut way to achieve this?</p>
  
  <p>Here is what I am getting ==>> <a href="https://i.imgur.com/yl48Kx2.gif" rel="nofollow noreferrer">https://i.imgur.com/yl48Kx2.gif</a></p>
  
  <pre><code>class Home extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
  
      return SafeArea(
        child: Material(
          child: CustomScrollView(
            slivers: [
              SliverPersistentHeader(
                delegate: MySliverAppBar(expandedHeight: 250),
                pinned: true,
                floating: true,
              ),
              SliverSafeArea(
                sliver: SliverAppBar(
                  pinned: true,
                  backgroundColor: Color(0xffA2B8A1),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (_, index) =&gt; ListTile(
                    title: Text("Index: $index"),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }
  }
  </code></pre>