我的网站有一个正常的标题，我希望在用户向下滚动时标题更改为固定标题。布局通过 margin: auto 0 居中；原始标题也是如此。 但是新标题从左侧正确开始，但一直持续到屏幕宽度，而不是布局宽度。 我不知道如何解决这个问题并使设计仍然具有响应性。
这是来自容器、第一个 header 和固定(或新) header 的代码:
.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">☰</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>
最佳答案
尝试添加
.menu-fixed{
left: 0;
right: 0;
max-width: 1400px;
}
谢谢!
关于javascript - 我的固定 Header 没有 margin-right 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44615929/