html - 静态通知横幅

Question

我使用 Foundation CSS 创建了一个响应式导航栏，该导航栏贴在您所在页面的顶部。我正在尝试创建一个位于导航栏上方的通知横幅，无论您滚动多远，我都希望它始终保持在顶部。虽然一旦您到达页面的最底部，通知栏就会隐藏，但导航栏仍然可见。为了解决这个问题，我将通知 div 和导航 div 包装在父 div 中，并将其位置设置为静态并将宽度设置为 100%。虽然这有效，但它会导致导航栏截断页面顶部的一些内容。我不能使用 div 作为分隔符来解决这个问题，因为当您使用窗口大小时，内容会被扭曲和隐藏。

 <div style="position: static; width: 100%">
    {% if message.strip %}
        <div style="background-color: black; text-align: center; border: 2px solid white">
            <span><p style="font-size: 30px; color: #A4D65E; margin-bottom: 0rem;">{{ message }}</p></span>
        </div>
    {% endif %}
    <nav class="top-bar topbar-responsive {{ environment_class }}" style="height: 50px;">
        <div class="top-bar-title">
            <div id="logo">
                <img src="{% static 'images/logo_black.png' %}" width="50px"/>
            </div>
            <div id="home">
                <a class="topbar-responsive-logo" href="{{ base_url }}/"><strong>Audit Bot</strong></a>
            </div>
        </div>
        <div id="topbar-responsive" class="topbar-responsive-links">
            <div class="top-bar-right">
                <ul class="menu simple vertical medium-horizontal">
                    <li><a href="{{ base_url }}/dashboard">Dashboard</a></li>
                    <li><a href="{{ base_url }}/insights/report?product_id=62">Insights</a></li>
                    <li><a href="{{ base_url }}/manual-trigger">Collect</a></li>
                    <li><a href="{{ base_url }}/contact">Contact</a></li>

                    {% if request.user.is_authenticated %}
                        <li><a href="{{ base_url }}/logout" title="logout">{{ request.user }}</a></li>
                    {% else %}
                        <li><a href="{{ base_url }}/login?next={{request.get_full_path|urlencode}}">Log In</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
</div>

标签： htmlcsszurb-foundation