我正在尝试创建一个粘性侧边栏。它在桌面分辨率下运行良好,但不幸的是在响应式分辨率下不起作用。而且粘性栏应该在移动分辨率中粘在内容的顶部,而不是像在桌面分辨率中那样位于左侧。 如需更多说明,我将在此处附上我的 js 和 css 文件。 http://dev.netbramha.in/projects/sticky-header/index.js http://dev.netbramha.in/projects/sticky-header/style.css
你们能帮帮我吗?
<header>
Header
</header>
<main>
<div class="center">
<div class="fullwidth">
Full Width Block
</div>
<div class="row">
<div class="left-sidebar">
<div class="content">
Sticky Sidebar
</div>
</div>
<div class="main-content">
Main Content
</div>
</div>
<div class="fullwidth two">
Full Width Block
</div>
</div>
</main>
<footer>
Footer
</footer>
最佳答案
对于响应式问题,您需要 css media queries 否则,您可以使用 bootstrap (css 框架)这就是在您的网站上自动做出响应
@media only screen and (max-width: 600px) {
.left-sidebar .main-content{
width: 100%;
}
}
<header>
Header
</header>
<main>
<div class="center">
<div class="fullwidth">
Full Width Block
</div>
<div class="row">
<div class="left-sidebar">
<div class="content">
Sticky Sidebar
</div>
</div>
<div class="main-content">
Main Content
</div>
</div>
<div class="fullwidth two">
Full Width Block
</div>
</div>
</main>
<footer>
Footer
</footer>
关于javascript - 粘性 header 响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53149293/