javascript - Foundation Framework Sticky Topbar 不粘

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 8 年前。

Improve this question

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

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

这是link到页面。

有人能看到我失败的地方吗？

Answer 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