手機沒有檢測到錨點更改切換菜單

嗨我做了一個網站使用fullpage.js這是偉大的和部分（整頁）之間滾動，但在手機上，它可能很難導航，所以我已經使它連續滾動時寬度小於640像素。手機沒有檢測到錨點更改切換菜單

我有一個菜單，在錨點從主頁面更改後切換，當錨點是主頁面時切換回來。這是因爲主頁面上有一個內置菜單，所以它不需要第二個菜單。

在使手機連續滾動後，此功能不起作用，但仍能在計算機瀏覽器上正常工作。我不知道我是否在尋找某些東西，或者我是否可以爲菜單切換編寫更好的腳本。請看www.themeltingpotkitchen.com看我的意思。

這是我的菜單js。我會指出，如果通過菜單點擊鏈接，它將起作用，但不能通過滾動：s

// detect anchor change and hide or show menu 
     function locationHashChanged() { 
      var hash = location.hash; 
      var id = hash.replace(/^#/, ''); 
      // logic 
      if (id == 'Home') { 
       $("#nav_hide").slideUp(); 
      } else if (id == 'About') { 
       $("#nav_hide").slideDown(); 
      } else if (id == 'Trailer') { 
       $("#nav_hide").slideDown(); 
      } else if (id == 'Food') { 
       $("#nav_hide").slideDown(); 
      } else if (id == 'Contact') { 
       $("#nav_hide").slideDown(); 
      } 
     } 
     window.onhashchange = locationHashChanged; 

     // if loaded page is home hide menu 
     var hashVal = window.location.hash.split("#")[1]; 

     var p = window.location.pathname.split("/"); 
     var filename = p[p.length-1]; 

     if(hashVal == 'Home', filename == 'index.html') { 
      $("#nav_hide").hide(); 
     }

來源

2015-03-08 lindstrom1989

您不應該在URL中使用更改來觸發任何操作。這不是用fullPage.js來完成的。您應該使用插件提供的回調，例如onLeave或afterLoad。或者你甚至可以使用的建議在this tutorial

之所以加入到body元素的類是因爲fullPage.js不會改變手機由於problems with the location hash behaviour in Mobile Chrome位置散列但uses the HTML5 History API：

//Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :) 
if (isTouchDevice || isTouch) { 
    history.replaceState(undefined, undefined, '#' + url); 
} else { 
    var baseUrl = window.location.href.split('#')[0]; 
    window.location.replace(baseUrl + '#' + url); 
}

來源

2015-03-09 10:48:58 Alvaro

謝謝阿爾瓦羅！請你能把你的視頻鏈接到這個嗎？作爲改變菜單與CSS轉換使用身體標記的變化是非常有益的，我認爲任何其他人有類似的問題會感激這一點！我將再次使用它來激活未來的網站！ – lindstrom1989 2015-03-10 19:21:31

手機沒有檢測到錨點更改切換菜單

回答

相關問題