如何在顶部UICollectionView上制作粘性标头

Question

Currently I have a header cell in my UICollectionView. When I try to scroll UICollectionView, header cell will scroll together with UICollectionView list. May I know how to set the header cell stick on top? Please help. Thank you.

My current result:-

My expected result:-

Here is my sample code for header cell in my ViewController:-

- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        DCHoverFlowLayout *layout = [DCHoverFlowLayout new];
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        _collectionView.frame = CGRectMake(0, DCTopNavH, ScreenW, ScreenH - DCTopNavH);

        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.delegate = self;
        _collectionView.dataSource = self;

        [_collectionView registerClass:[Product_HeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Product_HeadViewID];

    }
    return _collectionView;
}



- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

    UICollectionReusableView *reusableview = nil;
    if (kind == UICollectionElementKindSectionHeader){

        Product_HeadView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Product_HeadViewID forIndexPath:indexPath];
        WEAKSELF

  };
        reusableview = headerView;
        return cell;
    }

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{

    _lastContentOffset = scrollView.contentOffset.y;

}
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{

    if(scrollView.contentOffset.y > _lastContentOffset){
        [self.navigationController setNavigationBarHidden:YES animated:YES];
        self.collectionView.frame = CGRectMake(0, 20, ScreenW, ScreenH - 20);

        self.view.backgroundColor = [UIColor whiteColor];
    }else{
        [self.navigationController setNavigationBarHidden:NO animated:YES];
        self.collectionView.frame = CGRectMake(0, DCTopNavH, ScreenW, ScreenH - DCTopNavH);

        self.view.backgroundColor = ThemeBackgroundColor;
    }
}

#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //Detect Button Visible
    _backTopButton.hidden = (scrollView.contentOffset.y > ScreenH) ? NO : YES;


    WEAKSELF
    [UIView animateWithDuration:0.25 animations:^{
        __strong typeof(weakSelf)strongSelf = weakSelf;
        strongSelf.footprintButton.dc_y = (strongSelf.backTopButton.hidden == YES) ? ScreenH - 60 : ScreenH - 110;
    }];

}

UPDATED:-

After applied Ted's code, here is the result and apps will crash.

Answer 1

One option is to use a UIViewController instead of a UICollectionViewController . Add the view to use as your header to the view controller and then add a collection view below that header view.

This way the header is not part of the collection view and it won't scroll at all.

Answer 2

In your viewForSupplementaryElementOfKind method. Add these line:

UICollectionViewFlowLayout *layout = collectionView.collectionViewLayout;
layout.sectionHeadersPinToVisibleBounds = YES;

Answer 3

Swift version of tedd 's answer:

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.sectionHeadersPinToVisibleBounds = true