CollectionView -Stop/Prevent Section Header from Scrolling Beyond a Certain Point - ios

Question

I have a collectionView that is pinned to the top of the view controller with a no navigationBar collectionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true.
It has a sticky header let headerLayout = cv.collectionViewLayout as? UICollectionViewFlowLayout; headerLayout?.sectionHeadersPinToVisibleBounds = true
The collectionView has 2 sections, the first section has no header but the second section does have a header. The issue is because the collectionView isn't pinned to the safeAreaLayoutGuide.topAnchor and there isn't a navigationBar, when I scroll, the header in the second section gets pinned to the very top of the screen behind the status bar.
How can I prevent the header from scrolling beyond a certain point. For example if I had a button pinned to the top of the screen, the header would stop once it hit the bottom of the button
myButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
func scrollViewDidScroll(_ scrollView: UIScrollView) {
scrollView.contentInsetAdjustmentBehavior = .never
let secondIndexPath = IndexPath(item: 0, section: 1)
collectionView.layoutIfNeeded()
if let headerFrameInCollectionView = collectionView.layoutAttributesForSupplementaryElement(ofKind: UICollectionView.elementKindSectionHeader, at: secondIndexPath), let window = UIApplication.shared.windows.first(where: \.isKeyWindow) {
let headerFrameInSuperView = collectionView.convert(headerFrameInCollectionView.frame, to: collectionView.superview)
let headerOriginY = headerFrameInSuperView.origin.y
let buttonFrame = view.convert(myButton.frame, to: window)
let bottomOfButton = buttonFrame.origin.y + buttonFrame.height
if headerOriginY == bottomOfButton {
collectionView.contentInset.top = headerOriginY // stop header from scrolling any further
} else {
collectionView.contentInset.top = 0
}
}
}

Answer 1

In short, to get this to work I had to set the collectionView.contentInset.top to whatever point I wanted section two's header to stop at but I also had to set the collectionView.contentOffset.y to a stop position.
if headerOriginY <= bottomOfButton {
collectionView.contentInset.top = bottomOfButton
collectionView.contentOffset.y = cellHeightFromSectionOne - bottomOfButton
} else {
collectionView.contentInset.top = 0
}
In long, I have 2 sections and what happens is if I set collectionView.contentInset.top = bottomOfButton in section 2 without changing the collectionView.contentOffset.y, the cell in section 1 scrolls off the screen and the whole process is very buggy. To get it to work:
1- get the height for the cell in the first section. Luckily for me this was easy because in section 1 the cell's height is the width of the screen and there is only 1 cell in section 1. In section 2 there aren't any cells so the cell size for that is .zero:
// size for the cells
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = UIScreen.main.bounds.width // the collectionView is the same width
if indexPath.section == 0 {
return CGSize(width: width, height: width)
}
return .zero // section 2 has no cells, just a header
}
2- In scrollViewDidScroll, this is where all the work is done. The variable names explains the process
func scrollViewDidScroll(_ scrollView: UIScrollView) {
scrollView.contentInsetAdjustmentBehavior = .never
let secondIndexPath = IndexPath(item: 0, section: 1)
collectionView.layoutIfNeeded()
if let headerTwoAttributes = collectionView.layoutAttributesForSupplementaryElement(ofKind: UICollectionView.elementKindSectionHeader, at: secondIndexPath), let window = UIApplication.shared.windows.first(where: \.isKeyWindow) {
let headerTwoFrameInSuperView = collectionView.convert(headerTwoAttributes.frame, to: collectionView.superview)
let headerTwoOriginY = headerTwoFrameInSuperView.origin.y
let buttonFrame = view.convert(myButton.frame, to: window)
let bottomPositionOfButtonInWindow = buttonFrame.origin.y + buttonFrame.height
let stopScrollingPositionY = bottomPositionOfButtonInWindow
let cellHeightFromSectionOne = UIScreen.main.bounds.width
let preventFirstCellInSectionOneFromScrollingPosition = cellHeightFromSectionOne - stopScrollingPositionY
if headerTwoOriginY <= stopScrollingPositionY {
collectionView.contentInset.top = stopScrollingPositionY
collectionView.contentOffset.y = preventFirstCellInSectionOneFromScrollingPosition
} else {
collectionView.contentInset.top = 0 // reset this to 0
}
}
}