求助：如何实现滚动时让视图吸附至上方视图的效果

下面分不同技术栈给出具体实现方式，核心逻辑都是监听滚动偏移，动态调整目标视图的位置，当偏移量达到阈值时将视图固定在顶部：

iOS 实现方式 #

1. SwiftUI 方案 #

通过GeometryReader监听滚动偏移，动态计算按钮栏的偏移量：

struct StickyButtonBarView: View {
    @State private var scrollOffset: CGFloat = 0
    // 按钮栏到顶部的初始距离（可根据实际布局调整）
    private let initialTopOffset: CGFloat = 200
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // 顶部固定视图
                Color.blue.frame(height: 100)
                
                // 滚动内容区
                ForEach(0..<20) { index in
                    Text("列表项 \(index)")
                        .frame(maxWidth: .infinity, minHeight: 50)
                        .background(.gray.opacity(0.2))
                }
            }
            .overlay(
                // 需吸附的按钮栏
                HStack(spacing: 16) {
                    Button("按钮1") {}
                    Button("按钮2") {}
                    Button("按钮3") {}
                }
                .padding()
                .background(.white)
                .cornerRadius(8)
                .shadow(radius: 4)
                .offset(y: max(initialTopOffset - scrollOffset, 0)),
                alignment: .top
            )
            .background(
                GeometryReader { proxy in
                    Color.clear.preference(key: ScrollOffsetPreferenceKey.self, value: proxy.frame(in: .named("scroll")).minY)
                }
            )
        }
        .coordinateSpace(name: "scroll")
        .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
            scrollOffset = -value
        }
    }
}

// 自定义偏好键监听滚动偏移
struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

原理：通过滚动偏移量计算按钮栏的垂直偏移，当滚动距离超过初始顶部距离时，按钮栏固定在顶部（偏移量为0）。

2. UIKit 方案 #

利用UIScrollViewDelegate监听滚动，动态修改按钮栏的约束：

@interface ViewController () <UIScrollViewDelegate>
@property (nonatomic, assign) CGFloat buttonBarOriginalTop;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 记录按钮栏初始顶部位置（相对于滚动视图内容的偏移）
    self.buttonBarOriginalTop = CGRectGetMaxY(self.topView.frame) + 20;
    // 添加初始约束
    [self.buttonBar.topAnchor constraintEqualToAnchor:self.scrollView.topAnchor constant:self.buttonBarOriginalTop].active = YES;
    [self.buttonBar.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:16].active = YES;
    [self.buttonBar.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor constant:-16].active = YES;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    // 计算目标顶部距离：滚动偏移超过初始位置时，固定到顶部
    CGFloat targetTop = MAX(self.buttonBarOriginalTop - offsetY, 0);
    // 更新约束
    for (NSLayoutConstraint *constraint in self.buttonBar.constraints) {
        if (constraint.firstAttribute == NSLayoutAttributeTop && constraint.firstItem == self.buttonBar) {
            constraint.constant = targetTop;
            break;
        }
    }
}
@end

原理：监听滚动偏移量，动态调整按钮栏的顶部约束常数，达到阈值后固定视图位置。

Android 实现方式 #

1. Jetpack Compose 方案 #

通过ScrollState获取滚动偏移，动态设置按钮栏的偏移：

@Composable
fun StickyButtonBarScreen() {
    val scrollState = rememberScrollState()
    // 按钮栏初始顶部距离（可根据布局调整）
    val initialTopOffset = 200.dp
    val initialTopOffsetPx = with(LocalDensity.current) { initialTopOffset.toPx() }
    
    Column(modifier = Modifier.fillMaxSize()) {
        // 顶部固定视图
        Box(modifier = Modifier.fillMaxWidth().height(100.dp).background(Color.Blue))
        
        Box(modifier = Modifier.fillMaxSize()) {
            LazyColumn(
                state = scrollState,
                contentPadding = PaddingValues(top = initialTopOffset)
            ) {
                items(20) { index ->
                    Text(
                        text = "列表项 $index",
                        modifier = Modifier.fillMaxWidth().height(50.dp).background(Color.Gray.copy(alpha = 0.2)).padding(16.dp)
                    )
                }
            }
            
            // 需吸附的按钮栏
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .background(Color.White)
                    .cornerRadius(8.dp)
                    .shadow(4.dp)
                    .padding(8.dp),
                horizontalArrangement = Arrangement.SpaceAround
            ) {
                Button(onClick = {}) { Text("按钮1") }
                Button(onClick = {}) { Text("按钮2") }
                Button(onClick = {}) { Text("按钮3") }
            }
            .offset(y = max(initialTopOffsetPx - scrollState.value, 0f).dp)
        }
    }
}

原理：根据滚动偏移量计算按钮栏的垂直偏移，达到阈值后固定在顶部。

2. 原生 View 方案 #

监听NestedScrollView的滚动事件，动态设置按钮栏的translationY：

public class MainActivity extends AppCompatActivity {
    private int buttonBarOriginalTop;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        NestedScrollView scrollView = findViewById(R.id.nestedScrollView);
        View buttonBar = findViewById(R.id.buttonBar);
        
        // 布局完成后获取按钮栏初始顶部位置
        scrollView.post(() -> {
            buttonBarOriginalTop = buttonBar.getTop();
        });
        
        scrollView.setOnScrollChangeListener((NestedScrollView.OnScrollChangeListener) (v, scrollX, scrollY, oldScrollX, oldScrollY) -> {
            // 计算目标偏移：滚动距离超过初始位置时固定在顶部
            int targetY = Math.max(buttonBarOriginalTop - scrollY, 0);
            buttonBar.setTranslationY(-targetY);
        });
    }
}

原理：通过修改视图的偏移属性，实现滚动时的跟随与固定效果。

Web 前端实现方式 #

直接使用CSS的position: sticky属性，是最便捷的方案：

<div class="container">
    <!-- 顶部视图 -->
    <div class="top-view">顶部视图</div>
    
    <!-- 需吸附的按钮栏 -->
    <div class="sticky-bar">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
    
    <!-- 滚动内容 -->
    <div class="content">
        <div class="item">列表项 1</div>
        <div class="item">列表项 2</div>
        <div class="item">列表项 3</div>
        <!-- 更多列表项 -->
    </div>
</div>

<style>
.container {
    max-width: 1000px;
    margin: 0 auto;
}
.top-view {
    height: 100px;
    background: blue;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sticky-bar {
    position: sticky;
    top: 0; /* 滚动到距离顶部0时固定 */
    background: white;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
}
.content .item {
    height: 50px;
    background: #eee;
    margin: 10px 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
}
</style>

原理：position: sticky会让元素在滚动到指定位置后自动固定，无需额外JS逻辑。

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