Question

我的网站有一个正常的标题，我希望当用户向下滚动时标题会在固定标题中更改。布局以边距为中心：auto 0;原始标题也是如此。但新标题在左侧开始正确，但继续直到屏幕的宽度，而不是布局。我不知道如何解决这个问题并使设计仍然响应。

这是容器中的代码，第一个标头和固定（或新）标头：

.page_wrapper {
        width: 100%;
        max-width: 1400px;
        min-width: 330px;
        margin: 0 auto;
        position: relative;
}

.header {
        overflow: hidden;
        border: 5px;
        border-style: none none solid none;
        border-color: var(--color1);
        transition: all 0.2s ease;
} 

.menu-fixed{
         position: fixed;
         z-index: 1000;
         margin: 0 auto;
         top:0;
         width: 100%;
         height: 60px;
         /*background: rgba(255,255,255,0.9);*/
         background: white;
         box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

感谢您的帮助！

编辑：这是与标题有关的html代码：

<body>
<div class="page_wrapper">

<div class="header">
<a href="test.html"><img src="logo.png" alt="Logo"></a>
<a href="javascript:void(0);" onClick="toggleNavigation()" class="menu_icon">&#9776;</a>
<nav class="navigation responsive" id="topNav">
        <a href="">Angebote</a>
        <a href="test.html">Produkte</a>
        <a href="">Über uns</a>
        <a href="">Kontakt</a>
</nav>
</div>

<script>
        $(window).scroll(function(){
                if( $(this).scrollTop() > 0 ){
                        $('.header').addClass('menu-fixed');
                } else {
                        $('.header').removeClass('menu-fixed');
                }
        });



</script>

Answer 1

尝试添加

   .menu-fixed{ 
      left: 0;
      right: 0;
      max-width: 1400px;
   }

谢谢！

我的固定标题没有保证金权利？

1 个答案: