Foundation Framework Sticky Topbar 不粘

Question

我使用 Foundation 框架，我希望 "top-bar" 组件在浏览器 window 触摸导航时保持粘性。该文档显示了一个名为 "Stick Top Bar".

的示例

现在我已经完全按照文档显示的方式构建了 Topbar，但是它不起作用...

这是页面的link。

谁能看出我哪里失败了？

Answer 1

如果您希望顶部栏位于顶部并固定在那里，您需要一个 position: fixed; 。然后你的 top、left、right 和 bottom 属性将起作用，你将能够通过添加 top:0;

将你的导航栏放在顶部

 .sticky {
       top: 0;
       position: fixed;
    }

添加此 javascript（假设您已包含 JQuery）

$(window).scroll(function () {
    var $this = $(this),
        $head = $('.navigation');
    if ($this.scrollTop() > 1000) {
       $head.addClass('sticky');
    } else {
       $head.removeClass('sticky');
    }
});

您可以通过 $this.scrollTop() > yourvaluehere

调整栏弹出的位置

JSFiddle

Foundation Framework Sticky Topbar 不粘

Foundation Framework Sticky Topbar is not sticky

javascript

jquery

vendor

zurb-foundation