我正在尝试创建一个粘性侧边栏。它在桌面分辨率下工作正常,但不幸的是,在响应分辨率下无法正常工作。粘滞条也应该在移动分辨率中停留在内容的顶部,而不是在桌面分辨率中停留在内容的顶部。 有关更多说明,请在此处附加我的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>
答案 0 :(得分:2)
对于响应式问题,您需要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>
答案 1 :(得分:0)
使用media query,如下所示。希望这会有所帮助。
.row {
display: flex;
}
.left-sidebar {
width: 30%;
}
@media only screen and (max-width: 720px) {
.row {
flex-wrap: wrap;
}
.left-sidebar {
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>