導航欄上拉顯示下拉隱藏

2021-08-19 19:56:22 字數 888 閱讀 9734

一.需求說明

頁面載入時導航欄懸浮在頁面的上方,當滾動條向下滾動時導航欄隱藏,當滾動條向上滾動時導航欄顯示

二.原理講解

​ 頁面開啟時,先獲取到頁面的滾動條的初始高度(也可直接設為0),作用是初始化乙個值,用於後面事件觸發後進行判斷。

​ 再獲取導航欄的高度,作用是在初始位置進行下拉頁面後,在什麼時候觸發導航欄隱藏。

​ 最後寫滾動條觸發函式

三.事件函式講解

​ 事件觸發後,首先判斷事件發生後滾動條的高度與導航欄的高度。

當判斷為true時,導航條隱藏;當判斷為false時,導航條出現

​ 然後判斷本次事件導航條的高度與上次事件導航條的高度。

當上次高度,低於本次高度,說明使用者在看下面的內容,導航欄隱藏

當上次高度,高於本次高度,說明使用者在看上面的內容,導航欄出現

四.原始碼

導航選單欄

內容//此處jquery路徑要替換

Tabbar上拉隱藏下拉顯示

專案中有時候為了增加特效,我們通常會用到上拉滑動介面時候讓tabbar隱藏 當我們再下拉的時候再顯示tabbar,一行 就可以搞定 當然,我們會用到 void scrollviewdidscroll uiscrollview scrollview這個方法 我們只需要在這個方法裡面設定tabbar的a...

滾動cell 顯示隱藏導航欄

demo 關於滾動cell 顯示或者隱藏導航欄主要是根據scroll滑動拿到豎直方向的 滾動距離,通過距離判斷是否隱藏顯示隱藏 導航欄。這個一般可以用於 uiscrollerview和tabview.本demo 是隱藏原有的導航欄 通過自定義乙個view 代替原有的導航欄。通過縱向滾動的距離 漸變顯...

導航欄下拉列表被遮擋問題或者顯示不全問題

1 當我們設定頁面頭部元件時,一般會固定在頁面頂部,這樣是沒有問題的,但是當頭部元件有下拉列表時,問題就來了,選單部分會被下面的頁面遮擋。這時我們想到的第乙個辦法就是z index 增加其層級,但當下面的部分設定了position,那麼選單欄即使增加了層級也不會解決這種問題,那麼怎麼解決呢?想要解決...