UICollectionView hide/prevent cell scrolling behind Sticky Header

Question

I have a collection view with sticky headers

 flowLayout.sectionHeadersPinToVisibleBounds = true

My issue is that the top half of my header is translucent and when I scroll my cell up I can see the cell scrolling behind the header.

I would like to hide the part of the cell view behind the header. In my image attached I do not want to see the green when it is behind the red. The rest of the behavior I want to keep as is.

The reason I need this is I have a wallpaper image at the very back which I need to be shown

@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView.alwaysBounceVertical = true
    collectionView.register(UINib.init(nibName: EXAMPLE_CELL_REUSE_ID, bundle: nil), forCellWithReuseIdentifier: EXAMPLE_CELL_REUSE_ID)
    collectionView.register(UINib.init(nibName: EXAMPLE_HEADER_REUSE_ID, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: EXAMPLE_HEADER_REUSE_ID)

    if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
      flowLayout.headerReferenceSize = CGSize(width: 400, height: 100)
      flowLayout.sectionHeadersPinToVisibleBounds = true
  }
}




func numberOfSections(in collectionView: UICollectionView) -> Int {
    return sections.count;
 }

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1 //self.sections[section].1;
}



func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let exampleCell = collectionView.dequeueReusableCell(withReuseIdentifier: EXAMPLE_CELL_REUSE_ID, for: indexPath) as! MyCellCollectionViewCell;

    exampleCell.headerLabel.text = "Cell"
    exampleCell.backgroundColor = UIColor.green

    return exampleCell;
}


func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    if kind == UICollectionElementKindSectionHeader {
      if let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: EXAMPLE_HEADER_REUSE_ID, for: indexPath) as? ExampleHeader {
       //  header.backgroundColor = UIColor(red: 1.0, green: 0, blue: 0, alpha: 0.5)
        return header
      } else {
        return UICollectionReusableView()

      }
    }
    return UICollectionReusableView()
}

I think the question here may be similar but there are no responses and it is not quite clear if it is the same issue. Transparent sticky header ui collectionview don't show cells underneath

Answer 1

This worked for me:

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionHeadersPinToVisibleBounds = true
    layout.sectionInsetReference = .fromSafeArea
    view.backgroundColor = .white
    collectionView.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: 
    view.leadingAnchor, bottom: view.bottomAnchor, trailing: view.trailingAnchor)

Answer 2

You need to apply mask for all cells that located under header view. Use on scrollViewDidScroll

Tutorial: https://medium.com/@peteliev/layer-masking-for-beginners-c18a0a10743

Answer 3

I have created a very simple setup like yours and it is working fine.

class ViewController: UIViewController, UICollectionViewDataSource
{
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.collectionView.alwaysBounceVertical = true

        if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
        {
            flowLayout.headerReferenceSize = CGSize(width: 400, height: 100)
            flowLayout.sectionHeadersPinToVisibleBounds = true
        }
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int
    {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        return collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView
    {
        if kind == UICollectionElementKindSectionHeader
        {
            return collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "rview", for: indexPath)
        }
        return UICollectionReusableView()
    }
}