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

Question

我如何使用position：fixed;对于我的菜单，它不是网站上的第一个元素。 我的徽标是网站上的顶级项目，之后是菜单。当我向下滚动页面时，我希望菜单成为顶级元素。我怎样才能做到这一点？只有css才有可能吗？

Answer 1

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

示例

JsFiddle

<强> 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>

<强> CSS

ul{
    background-color: red;
    margin: 0;
}

ul li{
    display: inline;
}

.fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

<强>的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');
            }
        });
    });