个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的网站有一个正常的标题，我希望在用户向下滚动时标题更改为固定标题。布局通过 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/
25
4
0
当我设置 margin-right: 50px;我没有看到任何效果，但是当我替换 margin-right: 50px; 时左边距:50px；或 margin-top: 50px;我确实看到了效果。这
CSS .title{ margin-top: 200px; // does not work! margin-left: 20px; font-weight: bold;
我不知道，但是 li 元素的 margin-top 只有在它大于 h2 元素的 margin-bottom 时才会起作用，我想知道为什么？ Test1 Test2 谢谢。 最佳答案 您所描述的听起
我有 2 个 div 的问题 - 两个呈现为 block 的边距均为 15px(顶部 div 有底部边距，底部有顶部)，因此我预计两者之间的差距是 30px 而不是 15px，这是正确的假设还是我要疯
我一直以为我了解利润率和负利润率，但显然我不了解!我刚刚开始一个新的设计并且已经遇到了问题。 我有一个 div (hill3Cont) 和另一个嵌套在里面的 div (hill3Hill)，这是它们的
我有一系列这样的元素: ... ....... ... ....... h1 上边距为 5px，p 上边距为 10px。但是产生的边距只有 10px。如果我将底部边距增加到 50px，将顶部边距增加
由于 margin-right: auto 和 margin-left: auto 水平居中元素，我希望它们的垂直对应物以相同的方式运行。 但我知道这不会发生，根据 CSS 规范: 10.6.2 In
我在让我的 div 将我的页面向下移动 30 像素/在我的 div 顶部添加边距 30 像素时遇到问题。我的 div 使用 margin auto 在页面中心对齐。 然而，当我尝试添加这行代码时:边距
这个问题在这里已经有了答案: CSS margin terror; Margin adds space outside parent element [duplicate] (7 个答案) 关闭
我有一个 div 在另一个之上。顶部的 div 有 margin-bottom: 10px，底部的 div 有 margin-top: 10px，但两个 div 之间只有 10px 的空间。 实例:h
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 2 年前。 我的 CSS 边距没有按照我想要或期望的方
在此website我正在尝试减少横幅和文本之间ON MOBILE 底部和顶部的边距。 如果您在智能手机和平板电脑上查看，横幅的顶部和底部似乎有一些边距。 这是我的 CSS: .page-id-996
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
我是一名优秀的程序员,十分优秀！