2017-11-16 17_10_45.gif

最近，瀏覽簡書的時候，發現簡書iOS客戶端的個人主頁，有這種滑動懸停的效果，自己也想動手實現下。下面是我的實現效果:

2.gif

3.gif

11864689-97DB-47C9-8281-EE97E9E40CD4.png

方案一 ：利用tableView的sectionHeader懸停效果

以下是實現思路：

一.分頁Tab控件的滑動懸停效果：
這部分當時想自定義個控件來實現，一直沒有找到合適的方法。后來網上看到，有人說在頂部放個大小一樣的Tab分頁控件先隱藏，當tabview滑動到頂部時，滑動的隱藏，原來隱藏的再出現，這樣也會有問題。后來我決定這部分能懸停的設置為tabview的sectionHeader，tableview設置為plain就可以實現懸停。
二.頂部導航欄被頂上去的效果：
以前做過的項目，用系統的導航欄，被坑過很多次。這次索性不用系統的導航欄，直接用和導航欄一樣高度的view充當假的導航欄。然后在tableview的UIScrollviewDelegate代理方法里，根據便宜量，改變導航欄view的transform。這個地方剛開始是改變transform的height,后來發現有問題，就改為改變transform的y。
三.底部可以橫向滑動的Tab和三個tableView:
分頁Tab是作為tableview的sectionHeader，然后它本身底層是個scrollview,上面放了三個Button。下面其實是一個很大的cell,cell里放了一個scrollview,sacrollview里又放了三個tableview。sectionHeader里的scrollview和cell里的scrollview實現滑動聯動。

B952DE38-7439-485A-9884-401A722F94C2.png

方案二 ：將需要懸停部分當做cell的子視圖contentView,然后頂部懸浮地方，添加一個floatview。在floatview和cell之間切換子視圖。

aaa.jpg

bbbb.jpg

在scrollViewDidScroll代理方法中，實現切換：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    float ofsetY = scrollView.contentOffset.y;
    float limitY = self.headerView.frame.size.height + 40*5;
    if (ofsetY >= limitY) {
        [self.floatView addSubview:self.suspendCell.contentView];
        self.floatView.hidden = NO;
    } else {
        self.floatView.hidden = YES;
        [self.suspendCell addSubview:self.suspendCell.contentView];
    }
}

Demo地址

如有不對或者有待完善的地方，或者更好的實現思路，歡迎大家留言指正。