Sticky Nav Top-Bar让页面跳下来（基础5）

I'm using the Foundation framework to create my webpage and I'm using their Sticky Top-Bar navigation as a container for a simple Select Form. Although I did get it to work, when I scroll the page down and the Sticky Top-Bar catches the tope of the window, the rest of the page content 'jumps' down about 60px or so. I've messed with it for about 3 hrs now with no luck.

我正在使用Foundation框架来创建我的网页,我使用Sticky Top-Bar导航作为简单选择表单的容器。虽然我确实让它工作,当我向下滚动页面并且Sticky Top-Bar抓住窗口的tope时,页面内容的其余部分“跳跃”大约60px左右。我已经搞砸了大约3个小时,现在没有运气。

I'd greatly appreciate any insight or suggestions, especially from anyone who's familiar with Foundation.

我非常感谢任何见解或建议,尤其是那些熟悉基金会的人。

Here's the link to the page in question...

这是相关页面的链接......

Thanks!

2 个解决方案

#1

The Foundation sticky class was meant with its navigation bar in mind. The height of the nav bar is normally 45px, so when it's absolutely positioned with the sticky class, the body gets a padding with a similar height to compensate for it. You may want to fiddle with the top padding of the .f-topbar-fixed so it doesn't jump on scrolling.

基金会粘性课程的设计考虑了导航栏。导航栏的高度通常为45px,因此当它与粘性类绝对定位时,主体会获得具有相似高度的填充以补偿它。您可能希望摆弄.f-topbar-fixed的顶部填充,以便它不会在滚动时跳转。

#2

There is an option to remove the scrolltop

可以选择删除scrolltop

<nav class="top-bar" data-topbar data-options="scrolltop:false;">

From this post http://foundation.zurb.com/forum/posts/881-page-jumps-to-top-on-top-bar-hamburger-icon-click

来自这篇文章http://foundation.zurb.com/forum/posts/881-page-jumps-to-top-on-top-bar-hamburger-icon-click

#1

#2