UICollectionView hide/prevent cell scrolling behind Sticky Header - ios

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()
}
}