問題描述
我正在為我的網站使用 Zurb Foundation 4 框架.我想要一個導航欄，它位于標題下方，當您滾動過去時，該標題會粘在頁面頂部.這很好用，除了當頂部欄粘在頁面頂部時頁面內容會向上跳躍約 45 像素.雖然這是一個不同的導航元素，但可以在此頁面上看到效果:http://Foundation.zurb.com/docs/components/magellan.html
I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past. This works fine, except that the page content jumps up ~45 pixels when the Top Bar sticks to the top of the page. The effect can be seen on this page, though this is a different navigation element: http://foundation.zurb.com/docs/components/magellan.html
有什么方法可以解決這個問題，還是我必須更改我的網站設計以適應這個錯誤?
Is there some way to fix this, or do I have to change my site design to accomodate this bug?
文檔在這里:http://foundation.zurb.com/docs/components/top-bar.html
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Top Bar</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><a href="/grid.php">Item 1</a>
<ul class="dropdown">
<li><label>Level One</label></li>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li class="divider"></li>
<li><a href="#">Sub-item 3</a></li>
<li class="has-dropdown"><a href="#">Sub-item 4</a>
<ul class="dropdown">
<li><label>Level Two</label></li>
<li class="has-dropdown"><a href="#">Sub-item 1</a>
<ul class="dropdown">
<li><label>Level Three</label></li>
<li class="has-dropdown"><a href="#">Sub-item 1</a>
<ul class="dropdown">
<li><label>Level Four</label></li>
<li><a href="#">Sub-item 1</a></li>
</ul>
</li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li class="divider"></li>
<li><a href="#">Sub-item 4</a></li>
</ul>
</li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a>
</ul>
</li>
<li><a href="#">Sub-item 5</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li><a href="#">Item 2</a></li>
</ul>
</section>
</nav>
推薦答案
這似乎是 Foundation 4 的 Javascript 中硬編碼的功能".它不僅阻止了鏈接的默認行為，還自動強制鏈接重定向到#，這會導致瀏覽器跳轉到頁面頂部.這似乎是故意的(稍后會詳細介紹).
This appears to be a hard-coded "feature" in Foundation 4's Javascript. Instead of merely preventing the default behavior of the link, it automatically forces the link to redirect to #, which causes the browser to jump to the top of the page. This appears to be intentional (more on that in a second).
目前唯一的選擇是不使用 Top Bar 組件，并使用其他更可靠的 Foundation 組件創建自己的導航.例如，您可以使用 .sticky 類和簡單地使用所有必要的 <ul> 定義一個新的 內的菜單項.<nav> 元素輕松構建自己的導航;
The only alternative for now is to just not use the Top Bar component and create your own navigation using other, more reliable Foundation components. For instance, you can build your own navigation easily enough using both the .sticky class and simply defining a fresh <nav> element with all necessary <ul> menu items within.
頂部欄在設計上有一個非常具體的用途...單擊菜單"將使用 Javascript 將導航顯示為頂部欄下的單列選項.為了確保移動用戶可以滾動大量選項，這會將窗口跳轉到頁面頂部并刪除 fixed 行為，直到您關閉菜單.當您的頂部欄從頁面頂部開始時，這可以很好地工作，但當它不是時會產生嚴重影響(例如，滾動到頁面頂部可能會將菜單移出視圖).
The Top Bar has a very specific use by design... clicking "Menu" will use Javascript to reveal the navigation as a single column of options under the Top Bar. To ensure that mobile users can scroll a big set of options, this jumps the window to the top of the page and removes the fixed behavior until you close the menu. This works well enough when your Top Bar starts at the top of the page, but has serious implications when it doesn't (for instance, scrolling to the top of the page might move the menu out of view).
現在，這純粹是意見...但我真的不是 Foundation 的 Top Bar 實施的粉絲.可用性測試表明，將您的移動菜單放在頁腳并用錨鏈接到它們更有效和用戶友好.您可以使用 .hide-for-small 隱藏桌面菜單項，使用 .show-for-small 顯示您自己的自定義錨定菜單"鏈接...該菜單鏈接將錨定到頁腳中的特定于移動設備的菜單(同樣，您將使用 .show-for-small 顯示).
Now, this is purely opinion... but I'm really not a fan of Foundation's Top Bar implementation. Usability tests have shown that putting your mobile menus in the footer and linking to them with an anchor are more efficacious and user-friendly. You can use .hide-for-small to hide your desktop menu items and .show-for-small to reveal your own custom, anchored "Menu" link... that menu link would anchor to a mobile-specific menu in your footer (which again, you would reveal with .show-for-small).
長話短說:從可用性的角度來看，Top Bar 很草率，并且(根據設計)對于您的用例來說是損壞的.我建議建立自己的粘性菜單:-)
Long story short: Top Bar is sloppy from a usability standpoint and broken (by design) for your use-case. I'd recommend building your own sticky menu :-)
這篇關于使用 Zurb Foundation 滾動經過時，粘性頂部欄使頁面跳起來的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！