javascript - 粘性标题响应问题
问题描述
我正在尝试创建一个粘性侧边栏。它在桌面分辨率下工作正常,但不幸的是在响应式分辨率下不工作。并且粘性栏应该在移动分辨率中贴在内容的顶部,而不是像在桌面分辨率中那样位于左侧。如需更多说明,我将在此处附上我的 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媒体查询的响应问题 ,您可以使用引导程序(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>
推荐阅读
- java - Kafka Stream 未填充
- database - Delphi OraOLEDB.Oracle 提供者
- c# - Windows 7 中的 TcpListener.AcceptSocketAsync 问题
- javascript - Chai 导入时出现意外令牌
- mfc - 在使用 CefSharp Nuget 包的 CLR 应用程序上获取鼠标点击坐标
- sql-server - SQL将字符串字段转换为XML慢
- python - Xero 日记帐日期的日期类型
- javascript - 在数据表中使用正则表达式获取元素的唯一值计数
- python - 尝试创建自定义 Docker 映像,但在 RUN 步骤中被询问问题
- kubernetes - 在 k8s 上使用 elasticsearch 的 Zipkin 无法访问