在css中“固定”时将菜单保持在顶部答案

【问题标题】：Keep menu on top when "fixed" in css在css中“固定”时将菜单保持在顶部
【发布时间】：2014-12-04 20:44:39
【问题描述】：

距离顶部 113px，当用户滚动页面时位于顶部。

我知道有一个类似的问题，但我不知道该把 js 代码放在哪里。（是的，我是新手）

老问题： How to "fixed" menu only when it get to the top?

如果你想看一个例子，请告诉我。

最好的问候

卡斯滕

【问题讨论】：

欢迎来到 StackOverflow。请发布您的一些代码，如果您提供您尝试过的代码，它会更容易获得帮助
添加 jsfiddle 或代码，以便其他人可以帮助您。
其实，我只需要一个粘性菜单。如何做到这一点？

标签： javascript css menu fixed

【解决方案1】：

这里有一个如何做到这一点的例子：http://jsfiddle.net/andunai/9x74vkvw/

我还将.menu 包装到.menu-placeholder div 中，为菜单保留位置，防止页面在更改状态时“跳转”。

您的菜单需要 2 个 CSS 定义：.static 和 .fixed。这是示例 CSS：

.menu {
    width: 100%;
    margin: 0px 10%;
    display: block;
}

.menu.floating {
    position: fixed;
    top: 0;
    left: 10%;
    width: 10%;
}

【讨论】：

【解决方案2】：

好吧，您可以将代码放在页眉中，例如：-

<html>
<head>
<script>
$(document).ready({
$(window).on('scroll', function(){
    // instead of 113 use the scrollTop when the element touches the top of the window
    if($(window).scrollTop()>=113){
        $(element).css('position', 'fixed');
    }
    else $(element).css('position', 'relative');
});
});
</head>
<body>
// your stuff goes there.
</body>
</html>

【讨论】：

在 Magento 中，我应该把这段代码放在哪里？在模板 phtml 中？为什么代码会调用我的菜单 - 如果它仅基于一个参数 - 从顶部开始的 113 像素？

【解决方案3】：

你不需要 JS 就可以了：

#idOftheDiv 
{
    position:fixed;
    top:113px;
}

在您的 CSS 中。

【讨论】：