修复了粘性 header 展开

Question

我有以下问题。试图使固定的 header 始终位于最前面。该页面是响应式的，当屏幕较小时，header 如果单击会展开内容...我的问题是我找不到使其工作的解决方案..要么我把 position:fixed;并且 header 保持在顶部，但内容不会被推下...如果位置是相对的，内容会被推下但 header 不会粘在顶部。有什么解决办法吗？可能仅使用 CSS 但如果不使用 javascript..

CSS:

.header {
    width: 100%;
    height: inherit;
    margin-bottom: 5px;
    float: left;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: #f3f3f3;    
    -webkit-box-shadow: 0px 1px 1px #000;
    -moz-box-shadow: 0px 1px 1px #000;
    box-shadow: 0px 1px 1px #000;
}

javascript:

function showMobileBar(){
            $(menu).hide(0);
            $(showHideButton).show(0).click(function(){
                if($(menu).css("display") == "none")
                    $(menu).slideDown(settings.showSpeed);

                else
                    $(menu).slideUp(settings.hideSpeed).find(".dropdown, .megamenu").hide(settings.hideSpeed);
            });
        }

        // hide the bar to show/hide menu items on mobile
        function hideMobileBar(){
            $(menu).show(0);
            $(showHideButton).hide(0);
        }

HTML:

<div class="content">
            <header id="menuzord" class="menuzord blue">
    <h1>
        <a href="/" class="menuzord-brand">
            <img src="{% static 'img/logo.png' %}" alt="logo"/>
        </a>
    </h1>
    <a href="/admin/"/>Admin</a>
    <ul class="menuzord-menu">
        <li class="active">
        </li>
        <li class="active"><a href="#"><i class="fa fa-minus-circle"></i></a></li>
            {% endif %} -->
            <li class="active">
            </li>
            <li class="active">
            </li>
            <li class="active">
            </li>{% csrf_token %}
            <li class="active">
            </li>
    </ul>       
</header>
            <div class="container">
            <div class ="main">
                <div class="side">
                    <p>sidebar</p>
                </div>
            </div>
            </div>
</div>

谢谢

Answer 1

.header.menuOpened{ 
 position: relative;
 top: 200px;
}

并且在打开菜单时添加 class menuOpened 并在通过 js

关闭时删除

$('.menu').click(function(){
      $('.header').toggleClass('menuOpened')
})

Answer 2

您需要使用 media query。媒体查询可用于为不同的屏幕尺寸定义样式。在这种情况下，您需要将基本样式定义为常规 'static' header.

然后当屏幕宽度大于600时你可以应用一个'fixed'位置到header

.header {
    width: 100%;
    margin-bottom: 5px;
    background: #f3f3f3;    
    -webkit-box-shadow: 0px 1px 1px #000;
    -moz-box-shadow: 0px 1px 1px #000;
    box-shadow: 0px 1px 1px #000;
}

@media (min-width: 600px) {
    .header {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
    }
}

Answer 3

嗯，您提供的 link 代码与您使用的不同。但要解决您提供的 link 中的问题，您需要做几件事。

CSS:

.nav {
    position: fixed;
}
.header {
    margin-top: 55px; /* the height of the fixed nav bar */
}

@media (max-width: 900px) {
    .header {
        margin-top: 59px; /* the height of the fixed nav bar for smaller sizes */
    }
}

JavaScript：（更新了网站上的 jQuery 代码 - $(".btMenu").click() 函数）

$(".btMenu").click(function(){
    if($(".menu").children(".menuItem").css("display") == "none"){
        $(".menu").children(".menuItem").slideDown();
        var menuHeight = $(".menu").height(); // added - get the height of the menu after it has been expanded
        $(".header").animate({ marginTop: menuHeight + "px" }, 400); // animate the margin at the same speed of the slide, to match the new header height
    }
    else{
        $(".menu").children(".menuItem").slideUp();
        var menuHeight = $(".menu").height(); // added - get the height of the menu after it has been collapsed
        $(".header").animate({ marginTop: menuHeight + "px" }, 400); // animate the margin at the same speed of the slide, to match the new header height
    }
});

这有几件事。

首先，CSS 将 header 固定在顶部，并设置 header 的边距以匹配导航栏的高度（它们因屏幕宽度）。

因为 JavaScript 是打开菜单的，你可以简单地计算新的导航高度（在打开或关闭菜单事件之后），并设置新的边距（以相同的动画速度）对于 header。我还没有对此进行全面测试，但这是您需要的逻辑。如果有延迟，您可能需要稍微处理一下 animate 和 slideDown。

修复了粘性 header 展开

fixed sticky header expanding

javascript

jquery

css-position