javascript - 使用 ChocolateChip-UI 时试图摆脱地址栏

Question

我已经使用 ChocolateChip-UI ( http://www.chocolatechip-ui.com/ ) 几天了，我非常喜欢它设法将外观映射到已建立的移动标准的方式。

使我的站点适应 CC-UI 时遇到的一个问题是我无法使地址栏滚动。我尝试了所有方法，包括元标记，甚至是在 onLoad 滚动到 1px 的 hack。没有任何效果。如您所见，即使是 demo他们似乎没有让地址栏消失。

我该如何解决这个问题？我真的需要顶部的那些 40-50px。我认为地址栏，尤其是在 v7 之前的 iOS 上，打破了设计的一致性，从而降低了用户的注意力

Answer 1

CHUI Google Group 中对此进行了讨论。你可以在这里找到它:https://groups.google.com/forum/#!topic/chocolatechip-ui/XOr7b8HGNK8

来自 Robert Biggs 对此的回答

$('body').addClass('hideGlobalNav');
Then have some CSS in your document's header for a custom style:

body.hideGlobalNav #global-nav {
    display: none !important;
}
body.hideGlobalNav #articleWithoutGlobalNav {
    top: 0 !important;
}

Then, you'd need to remove that class from the body tag when the user navigates away. I'm not sure how the navigation is set up in your app, whether the user leaves by going back or forward, but you can handle that in several ways. You can add event listeners for navigation and when the user is leaving #articleWithoutGlobalNav, then you would remove 'hideGlobalNav' from the body tag. You could do something like this:

$('article').on('navigationend', function(e) {
   // e.target is the current article that loaded
   if (e.target.id === 'articleWithoutGlobalNav') {
 $('body').addClass('hideGlobalNav');
   } else {
          $('body').removeClass('hideGlobalNav');
   }
})