有人可以帮我创建两列布局的静态侧边栏

时间:2013-02-17 09:00:10

标签: html css responsive-design two-column-layout

请在用户开始滚动时帮助我将此右侧边栏设为静态。我是响应型网页设计的新手。我试图使用“position:fixed”属性,但我不知道它在响应式设计中的可行性。请帮我。 这是链接http://the-bootstrap.obenland.it/page-with-comments/

3 个答案:

答案 0 :(得分:1)

JS为你提供帮助 - JSfiddle for you

创建一个这样的类: -

.fixed {

          position:fixed;
          right:88px; /*insert this aswell*/
       }

并将其与侧栏部分一起使用,如下所示。

<section role="complementary" class="widget-area span4 fixed" id="secondary">

答案 1 :(得分:1)

如果您希望保持响应式网页设计原则,只需应用position:fixed就行了。如果你希望它在较小的屏幕上很好地工作,你必须有条件代码。它必须在“普通”屏幕上修复,当屏幕变得“太小”时你需要删除该类。您还需要确定“正常”和“太小”对您来说意味着什么。请看这里的例子:

http://home.edgemontgeek.com/dev/stackoverflow/14919523/

请记住,您还需要控制屏幕高度。如果窗口不够大以适应固定内容,他们将无法看到它。您可以考虑使用两个可以单独滚动的列。

答案 2 :(得分:1)

使用

.fixed{
left:0;
position:fixed;
top:Height_of_logo;
}

这将创建一个侧边栏,在顶部留出徽标空间,但如果您希望侧边栏在用户向下滚动时向上滑动,然后在徽标超出范围时粘贴,那么我建议您使用这样的Jquery插件一个

http://viget.com/inspire/jquery-stick-em

此网站提供了非常好的文档以及演示。

相关问题