Header sliver not floating over the list in a NestedScrollView

I have a Material Design screen where I use a RefreshIndicator for pull-to-refresh effect. However, I need the RefreshIndicator to appear below the SliverAppBar; due to that, I can't just leave the SliverAppBar inside the list's CustomScrollView and I need to give it a header place in a NestedScrollView.

The problem comes because I can't seem to synchronize the general scroll of the list and the header. The list scrolls fine, but the header does not. I want it to float and snap upon scroll up/down.

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  final ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, _) => [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              floating: true,
              snap: true,
              title: Text('Title'),
            ),
          )
        ],
        body: Builder(
          builder: (context) => RefreshIndicator(
            onRefresh: () { /* do stuff */ },
            child: CustomScrollView(
              controller: _scrollController, // needed for an infinite scroll items loading effect
              slivers: <Widget>[
                SliverOverlapInjector(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)
                )
                // more slivers
              ],
            ),
          )
        ),
      ),
    );
  }
}

I guess I am missing something regarding the injecting/absorbing of the header sliver overlap.

How can I make the SliverAppBar and the general CustomScrollView scroll synchronously?