Question

我有以下问题。试图使固定的标题始终在顶部。该页面是响应式的，当屏幕很小时，如果点击标题会扩展下推内容...我的问题是我无法找到使其正常工作的解决方案..要么我把位置：固定;并且标题保持在顶部，但内容不会被推下...如果位置是相对的，则内容被推下但标题不会粘在顶部。这有什么解决方案吗？可能只使用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;
}

当菜单打开时，添加类menuOpened并在被js

关闭时删除

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

Answer 2

您需要使用media query。媒体查询可用于定义不同屏幕尺寸的样式。在这种情况下，您需要将基本样式定义为常规“静态”标题。

然后，当屏幕宽度大于600时，您可以将“固定”位置应用于标题

.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

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

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将标题固定在顶部，并设置标题的边距以匹配导航栏的高度（它们根据屏幕宽度而不同）。

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

固定粘性标题展开

3 个答案: