Css 固定菜单在顶部，但不是第一个元素

如何使用位置：固定；对于我的菜单，当它不是网站上的第一个元素时。

---

我的徽标是网站上最重要的项目，然后是菜单。当我向下滚动页面时，我希望菜单是最上面的元素。我该怎么做？仅使用css是否可行？

这需要使用javaScript，但可以非常简单地完成

示例

HTML

<header>
    <p class="site-title">
        <a href="#">Your logo here</a>
    </p>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

jQuery

$(function ()
    {
        // Get the initial position of the menu.
        var menuTop = $('nav').offset().top;

        $(window).scroll(function ()
        {
            // Check position
            if ($(window).scrollTop() > menuTop)
            {
                $('nav').addClass('fixed');
            }
            else
            {
                $('nav').removeClass('fixed');
            }
        });
    });

---

谢谢你的快速回复。我尝试过这个解决方案，但似乎无法奏效。代码导入正常，我尝试禁用菜单中所有现有的javascript代码，但仍然不起作用。你知道怎么了吗？（我知道当你不知道所有的事实时这很难，但是如果你知道问题可能是什么，我将非常感激你能把你的代码作为JSFIDLE发布，然后我可以看看你。嗨，我已经在joomlart为Joomla cms系统提供的免费框架“T3”上构建了它。

$(function ()
    {
        // Get the initial position of the menu.
        var menuTop = $('nav').offset().top;

        $(window).scroll(function ()
        {
            // Check position
            if ($(window).scrollTop() > menuTop)
            {
                $('nav').addClass('fixed');
            }
            else
            {
                $('nav').removeClass('fixed');
            }
        });
    });