1.實際需求
（移動端專案）當往下滑動到一定距離時，顯示導航欄，導航欄定位在頂部，當向上滑動並小於那個距離時，導航欄隱藏。
2.解決方案
實時監測瀏覽器滾動高度，繫結onscroll事件，具體詳情見此文--此文介紹的很詳細，包括在android 和 ios上的相容性問題，以及處理方案。下面說點此文沒有的。
3.期間所遇問題
scrolly & pageyoffset
當時因未知原因，使用scrolltop在ios上測試失敗，後在上文鏈結中的參考文章onscroll event issues on mobile browsers中，發現裡面的例項使用的window.scrolly，可以實時反映滾動條滾動高度，即便是慣性滾動也能成功反映出。pageyoffset是scrolly的別名，區別在於pageyoffset的相容性比較好。
（1）繫結onscroll事件
（2）導航切換，頁面滾動到222px的地方，不顯示上方的搜尋框內容
（3）頁面初始進去，沒什麼問題，效果正常。但是當切換了導航後，問題就來了，滾動到頂部，導航卻出現了，
（4）觀察到列印出的window.pageyoffset，在切換了導航後一直為 222， what？？？？？？
這個怎麼看怎麼像是被賦值了，說好的唯讀呢？（暫未理解。。。）
（5）最後的解決辦法，就是把window.pageyoffset去掉了，不用效果也是正常的（當時陰差陽錯才用到這個）
在移動端使用input禁止編輯
disabled 屬性規定應該禁用 input 元素，被禁用的 input 元素，不可編輯，不可複製，不可選擇，不能接收焦點,後台也不會接收到傳值。設定後文字的顏色會變成灰色。disabled 屬性無法與 一起使用。示例 readonly 屬性規定輸入欄位為唯讀可複製，但是，使用者可以使用tab鍵切...
fixed在移動端的坑
fixed在某些情況下可能導致容器內的子元素的1px邊框線消失，即使使用z index也無法解決。解決方法 可以使用translatez屬性來解決 fixed定位的容器內不能帶有input，這是常見的bug。解決方法 在input聚焦的時候去掉fixed定位狀態，改為absolute。fixed 可...
rem在移動端的應用
1rem為頁面根目錄的字型大小。若 html 則1rem 20px 在移動頁面的具體應用。移動端的設計稿一般都是iphone6為基礎設計的，設計稿的寬為750px 手機的物理尺寸是375px 所以在用css的時候，設計尺寸需要初以2 要用rem完成移動端的適配，需要固定瀏覽器的顯示寬度不變。第一 設...