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

Question

我如何使用位置：固定；对于我的菜单，当它不是网站上的第一个元素时。我的标志是网站上的首要项目，然后是菜单。当我向下滚动页面时，我希望菜单成为顶部元素。我怎样才能做到这一点？只有css有可能吗？

Answer 1

这需要使用 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>

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