我正在尝试建立一个网站，其侧面板位于右侧，主要内容位于左侧。主要内容已经存在并且相当复杂。侧面板是新添加的，并不总是可见。
主要内容的“响应能力”应该根据侧面板是否处于活动状态而表现不同。例如。当没有侧面板时，主要内容需要从 3 列布局切换到 1 列布局，当没有侧面板时，视口宽度
我能够通过使用来实现这一点容器查询 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries与GoogleChromsLabs Polyfill https://github.com/GoogleChromeLabs/container-query-polyfill.
我使用容器查询是因为这样我就不必重写每个样式表来在侧面板存在时进行额外的媒体查询。我可以搜索并替换每个@media (min-width with @container main-content-container (min-width.
如果我可以在媒体查询中使用 CSS 自定义属性，那就更容易了，但不幸的是它们不能那样工作。
总的来说，这个效果非常好。
主要内容中的固定元素除外。这些现在固定在容器内而不是视口内。例如，向下滚动时导航栏应粘在窗口顶部，但它会粘在容器顶部并滚动出视口。
有办法做到吗fixed相对于视口而不将其移动到容器 div 之外？
示例代码：
document.querySelector('.toggleContainer').addEventListener("click", function() {
document.querySelector('.main-content').classList.toggle('container')
});
document.querySelector('.toggleSidePanel').addEventListener("click", function() {
document.querySelector('.side-content').classList.toggle('show')
});
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: auto max-content;
}
.main-content {
background-color: orange;
}
h2 span {
display: none;
}
.container {
container-type: inline-size;
container-name: main-content-container;
}
.container h2 span {
display: inline;
}
.content {
background-color: red;
padding: 5rem 1rem;
min-height: 1000px;
}
.side-panel {
background-color: green;
}
.side-content {
display: none;
width: 200px;
padding: 1rem;
}
.side-content.show {
display: block;
}
.fixed-element {
box-sizing: border-box;
background-color: blue;
padding: 1rem;
position: fixed;
top: 0;
width: 100%;
}
<div class="wrapper">
<div class="main-content container">
<div class="fixed-element">
Fixed Element
</div>
<div class="content">
<h2>Content <span>(in container)</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</p>
<button class="toggleContainer">Toggle Container</button>
<p>
Lorem
</p>
<button class="toggleSidePanel">Toggle Side Panel</button>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi soluta laborum et suscipit deserunt hic consequatur neque accusantium expedita distinctio in cumque quae asperiores cum voluptas, architecto laudantium ipsum nulla!
</p>
</div>
</div>
<div class="side-panel">
<div class="side-content show">
<h2>Side Panel</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi soluta laborum et suscipit deserunt hic consequatur neque accusantium expedita distinctio in cumque quae asperiores cum voluptas, architecto laudantium ipsum nulla!
</p>
</div>
</div>
<div>
我想我找到了解决方案。
使用时似乎有效sticky代替fixed.
这可能并不适用于所有场景，但它对于导航栏来说效果相当好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
