*****阅读完此文，大概需要5分钟******
?一、背景
上图为大众点评App首页
带有悬停效果的页面是App中最为常见的页面了，几乎任意一款主流app都会有这种页面。这种页面要求整个页面可以滑动，当滑到一定高度时，要求某一部分做悬停，然后开始滑动下部的列表；这种页面我在业务中不止一次碰到，因为每次碰到都会因为调试花费较多时间；与此同时，这个页面框架较为复杂，不太好抽象出框架下沉，所以特意整理输出了一些方案，供大家参考，以便再碰到时，可以快速搭建这种页面；
二、搭建方案
这种页面方案不是唯一的，目前把自己开发中调研过的集中方案介绍一下，每种方案都已经抽象出demo代码，具体的工程代码（源码在以下公众号里，敬请关注即可）。
跑一下example工程即可；
方案一：
利用UITableView的Plain Style的特性，可以悬停其section的方式实现；
??
如图，这个tableview被分为以下几个部分，通过滑动时计算section的坐标，控制上滑到什么位置，所以这时候需要重写对应的scrollViewDidScroll:方法：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView == self.tableView) {
CGFloat SliderSectionHeightOffset = [self.tableView rectForSection:1].origin.y - 1;
SliderSectionHeightOffset = floorf(SliderSectionHeightOffset)；
if (scrollView.contentOffset.y >= SliderSectionHeightOffset) {
scrollView.contentOffset = CGPointMake(0, SliderSectionHeightOffset);
self.bottomContentCell.objectCanScroll = YES;
self.canScroll = NO;
} else {
if (self.canScroll) {
self.bottomContentCell.objectCanScroll = NO;
} else {
scrollView.contentOffset = CGPointMake(0, SliderSectionHeightOffset);
}
}
}
}与此同时，当section滑到顶部时，外部list禁止滑动，并告知底部的list，可以滑动了；上面代码里通过设置self.bottomContentCell.objectCanScroll = YES; 实现；具体的实现参考代码：MDScrollHoverPage/PlanFirst/示例代码。
方案二：
类似方案一，不同的是，不需要重写外部list的sectionView，转为下部的bottomCell实现，其余逻辑保持不变。
方案三：
将要悬停的hoverView添加到ScrollView上，当滑动到一定位置后，改变hoverView的层级来控制悬停。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y > TopContentViewHeight) {
[self.sliderSectionView removeFromSuperview];
self.sliderSectionView.frame = CGRectMake(0, NavigatorHeight, ScreenWidth, SliderSectionHeight);
[self.view addSubview:self.sliderSectionView];
} else {
[self.sliderSectionView removeFromSuperview];
self.sliderSectionView.frame = CGRectMake(0, TopContentViewHeight, ScreenWidth, SliderSectionHeight);
[self.scrollView addSubview:self.sliderSectionView];
}
}方案四：
将要悬停的hoverView添加到self.view上，和tableview在统一层级，同时设置tableView的tableHeaderView为topView，如下：
hoverView始终和tablview在同一层级，仅通过一些必要的计算来实现悬停效果。
通过计算滑动的坐标，进行计算：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@"-------->%@",@(scrollView.contentOffset.y));
if (scrollView.contentOffset.y >= 0) {
if (scrollView.contentOffset.y >= TopContentViewHeight - SliderSectionHeight) {
self.hoverView.y = NavigatorHeight;
} else {
self.hoverView.y = NavigatorHeight + TopContentViewHeight - SliderSectionHeight - scrollView.contentOffset.y;
}
} else {
self.hoverView.y = NavigatorHeight + TopContentViewHeight - SliderSectionHeight - scrollView.contentOffset.y;
}
}三、方案之间的对比
以上的一二方案其实属于一类，三四属于一类；
（1）其中第一、第二种方案，当我们滑动外层tableview时，当位移到达顶部时，外层tableview需要先停下来，需要再次滑动才可以滑动下部tableview；我们目前所在的很多详情页，个人资料页都是这种方案；
（2）第三四方案，由于不涉及多tableview的问题，可以规避上述问题，整个列表一体，及时到达悬停位置依然可以继续滑动，目前云音乐的我的tab下的页面就是类似的实现；
（3）对比scrollViewDidScroll方法中的实现逻辑来看，第一二种方案较为复杂，需要较多的代码逻辑控制，第三四种方案较为简单一些；其中第二种方案是第一种方案的改进，第四种方案是第三种方案的改进。