Foundation Framework Sticky Topbar 不粘[关闭]答案

【问题标题】：Foundation Framework Sticky Topbar is not sticky [closed]Foundation Framework Sticky Topbar 不粘[关闭]
【发布时间】：2015-08-26 19:31:13
【问题描述】：

我使用 Foundation 框架，我希望“顶栏”组件在浏览器窗口接触到导航时具有粘性。该文档显示了一个名为 "Stick Top Bar" 的示例。

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

这是页面的link。

任何人都能看到我失败的地方吗？

【问题讨论】：

标签： javascript jquery zurb-foundation vendor

【解决方案1】：

如果您希望您的顶栏位于顶部并固定在那里，您需要一个 position: fixed; 。然后您的顶部、左侧、右侧和底部属性将起作用，您将能够通过添加 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

【讨论】：

是的，但是当浏览器窗口穿过导航元素时，顶栏只想固定在顶部
哦，好的。这将需要一些javascript。我会更新我的解决方案
完成，我添加了 javascript。
好的，我打开了一个小提琴。我认为它只是粘在上面。现在滚动...jsfiddle.net/Nighteyes/etyb63my/1
你好 Hristo, hatte es gestern getestet und hat alles geklappt ;) Danke dafür！