如何实现YouTube主页式粘性头部滚动交互效果？

问题描述 #

在YouTube主页中，向下滚动时YouTube标志区域会消失；向上拖动时，首先会显示YouTube标志区域，之后滚动视图才会开始滚动。尝试通过「顶部UIView+底部UITableView」的方式实现时，单向滚动效果正常，但单次触摸操作中上下滚动时，顶部视图尺寸会超出预期值。

实现思路 #

核心逻辑是拦截滚动事件，优先处理顶部栏的显示/隐藏，再让列表滚动，通过严格约束顶部栏的偏移范围，避免单次触摸上下滚动导致的布局异常。

代码实现示例（iOS Swift） #

1. 定义基础变量

// 顶部栏固定高度
let topBarHeight: CGFloat = 44
// 记录顶部栏当前偏移量（负数表示隐藏高度，0为完全显示，-topBarHeight为完全隐藏）
var topBarOffset: CGFloat = 0
// 记录上一次滚动偏移，用于判断滚动方向
var lastScrollOffsetY: CGFloat = 0

2. 监听滚动事件，处理顶部栏与列表的滚动优先级

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let currentOffsetY = scrollView.contentOffset.y
    let deltaY = currentOffsetY - lastScrollOffsetY
    
    // 计算顶部栏目标偏移量，严格限制在合法区间内
    var targetOffset = topBarOffset - deltaY
    targetOffset = max(-topBarHeight, min(0, targetOffset))
    
    // 若顶部栏未到达边界，拦截列表滚动，优先移动顶部栏
    if targetOffset != topBarOffset {
        scrollView.contentOffset.y = lastScrollOffsetY
        topBarOffset = targetOffset
        // 更新顶部栏位置（也可通过约束constant值实现）
        topBarView.frame.origin.y = topBarOffset
    }
    
    lastScrollOffsetY = currentOffsetY
}

3. 处理惯性滚动的收尾动画

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    // 根据滚动速度，让顶部栏自动归位到完全显示/隐藏状态
    if velocity.y > 0 {
        topBarOffset = -topBarHeight
    } else if velocity.y < 0 {
        topBarOffset = 0
    } else {
        // 无速度时，根据当前偏移的一半位置决定归向
        topBarOffset = topBarOffset < -topBarHeight/2 ? -topBarHeight : 0
    }
    
    // 流畅过渡动画
    UIView.animate(withDuration: 0.3) {
        self.topBarView.frame.origin.y = self.topBarOffset
    }
    
    // 修正列表的目标偏移，避免冲突
    targetContentOffset.pointee.y = lastScrollOffsetY
}

关键注意点 #

• 不要使用两个独立滚动视图，建议将顶部栏作为TableView的子视图（或与TableView同属一个父视图），通过拦截TableView滚动事件控制顶部栏位置。
• 严格约束顶部栏的偏移范围，禁止超出0到-topBarHeight区间，解决单次触摸上下滚动的尺寸异常问题。
• 补充惯性滚动的收尾逻辑，让交互体验与YouTube保持一致。

内容的提问来源于stack exchange，提问作者Bravo