Question

我想知道如何在使用专门的html代码滚动时创建一个粘性菜单栏。这甚至可能吗？灵感网站http://www.herschelsupply.com。

澄清......我的菜单栏由“Plånböcker”“Kundtjänst”“Om Oss”组成。

我的菜单栏的HTML代码是......

<nav id="main_navigation">
    <ul class="row">{{! Highlight "All items" if we are on a list page and no navigation item is selected }}
        <li class="column {{#list_page}}{{#no_current_navigation}}selected{{/no_current_navigation}}{{/list_page}}"> <a href="{{store_url}}/products">

                {{#navigation}}
                <li class="column {{#is_current}}selected{{/is_current}}">
                    <a href="{{url}}">
                        {{label}}
                    </a>

        </li>{{/navigation}} {{#store_blog_url}}
        <li class="column"> <a href="{{store_blog_url}}" target="_blank">
                        {{#lang}}Blog{{/lang}}
                    </a>

        </li>{{/store_blog_url}}
        <li class="column">
            <li class="column"> <a href="{{store_url}}/Kundtjänst">
                        Kundtjänst
                    </a>

            </li> <a href="www.wingmanstore.se/Kundtjänst" target="_blank">

                </a>

        </li>
        <li class="column {{#about_page}}selected{{/about_page}}"> <a href="{{store_url}}/page/about">
                        {{#lang}}Om oss{{/lang}}
                    </a>

        </li>
    </ul>
    <div id="search_container">{{search}}</div>{{! By using #is_current within a #navigation block we can find the currently selected navigation item }} {{#navigation}} {{#is_current}} {{! Render the submenu if it has any navigation items }} {{#children?}}
    <ul class="child_navigation row">{{#children}}
        <li class="column"> <a href="{{url}}">
                        {{label}}
                    </a>

        </li>{{/children}}</ul>{{/children?}} {{/is_current}} {{/navigation}}</nav>
</header>

Answer 1

你的问题确实没有意义，因为如果没有样式的指示，HTML就相当无用。例如，您引用的站点使用它来完成其粘性标题：

#top-header-container {
    position: fixed;
    top: 0;
    margin: auto;
    width: 100%;
    z-index: 98;
    background: rgba(255,255,255,0.75);
    height: 70px;
}

您可以在HTML页面中嵌入style标记，以使用相同类型的样式。

我可以创建只有HTML的粘性菜单栏吗？

1 个答案: