標頭隱藏在移動設備上，直到用手指拉下來

我正在建立一個移動網站（非本地）以在iPhone 4上運行。我需要有一些「標題」內容，大約80像素高和100％寬除非用戶在任何顯示的內容上向下滑動/向下拖動，否則它總是隱藏。標頭隱藏在移動設備上，直到用手指拉下來

本文做幾乎正是我想要的：

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

但問題是，它是更爲複雜的比我需要的，做一些互動，增加東西我不需要。我嘗試將它連接到我現有的webapp中，但它將所有樣式都封裝起來，並且沒有正確工作。他們使用了許多我不想要的風格。在我花更多時間改變樣式並試圖找出哪些樣式對下拉效果至關重要以及哪些樣式是無關的之前，我想看看是否有人有更簡單的方法來實現這一點。

目的：手指向下滑動到我的移動網頁上的任何地方，我的隱藏標題滑入視圖。釋放時，標題向上滑動並再次隱藏。我不需要任何比這更好的東西。

相關問題：手指向下拉網頁時觸發移動瀏覽器的「事件」是什麼？這是「onscroll」還是類似的？或者移動設備獨有的東西？

謝謝。

來源

2013-06-12 HerrimanCoder

聽起來像一個偉大的解決方案......但我會在網址查詢字符串提供一個錨爲工作？我不想讓這個網址混亂...有沒有其他的方式來做主播？ – HerrimanCoder

是的。我已經將我的評論轉到了一個答案。 – IanPudney

由於您希望在任何顯示的內容上發生這種情況，因此您可以使用錨點在頁眉下啓動頁面;因此，拉下頁面（向上滾動頁面的「頂部」）會顯示您的標題。您可以使用一個onload（）JavaScript事件引起頁面自動跳轉到你的錨：

<script type="text/javascript"> 
function load() { 
    var urllocation = location.href; 
    if(urllocation.indexOf("#anchor") > -1){ 
     window.location.hash="anchor"; 
    } else { 
    return false; 
    } 
} 
</script> 
<body onload="load()">

來源

2013-06-12 16:31:58 IanPudney

我喜歡理論上的方法，但它並沒有做我想做的。它所做的只是將地址欄隱藏在我的iphone上，而不是將頂部標題向上滾動。我已經將錨標籤放置在不同的地方，但總是得到相同的結果。此外，您的代碼中存在一個錯誤。它應該是如果（urllocation.indexOf（「＃anchor」）== -1）{ – HerrimanCoder

糾正，它沒有隱藏地址欄，這只是在頁面加載後幾秒鐘正常的iPhone行爲。錨點的東西根本不起作用，不知道爲什麼。 – HerrimanCoder

標頭隱藏在移動設備上，直到用手指拉下來

回答

相關問題