滑動吸頂效果

最近在作一個項目，頂部titlebar，下方輪動banner（也就是普通的輪播圖），底部通用的分類文章內容，滑動超過必定距離分類吸頂效果，相似於高德地圖，搜索輸入‘極客地圖’效果；
複製代碼

滑動吸頂附帶上拉加載更多效果，

• 使用vue組件構成總體頁面，頂部titlebar，中間輪播banner，底部iscroll滑動部分，滑動到吸頂的時候初始化底部iscroll，繼而致使頁面監聽滑動失效；
• 跳到二級頁面回退iscroll失效，由於頁面附帶滑動下載更多，原生js實現問題比較多，繼而想在iscroll的基礎上進一步實現，如何有效的避免iscroll帶來的諸多問題；

實現方式：

初版

• iscroll區域灰色選區域圖標1，超過某些px元素圖標1定位在某區域，總體banner固定不變，只是切換圖標1位置；
• 當元素低於某px以後圖標1迴歸原位，效果生澀，頁面原生scroll失效；

第二版

• 總體頁面iscroll，banner定位上層脫離iscroll容器區域，底部div套在banner底層佔位置，scroll滑動的時候，最外層banner像層布改在滑動上方，效果差；

第三版

• 滑動banner跟隨頁面滑動，超過區域顯示圖標1，而且隱藏iscroll容器內圖標1真僞

解決方案

• 首先整個頁面看成iscroll容器，banner嵌套在iscroll容器內，監聽scroll的scroll事件，this.y超過滑動區域顯示吸頂元素，隱藏iscroll容器內紅色標註部分，顯示iscroll容器外的元素，由於iscroll區域內使用fixed定位不起做用

iscroll帶來的問題

• iscroll區域塊以內的全部原生滑動被禁止；
• 頁面監聽scroll事件失去做用；
• 點擊click報錯，可使用tab解決該問題，可是tap點擊比較靈敏，會觸發頁面想不到的事件，

綜上所述，出現了better-scroll插件來實現iscroll一些效果，該問題經過視覺效果隱藏banner，形成一種滑動區域在banner下面部分效果滑動；