Question

在几个页面上，我看到一个侧边栏，其中包含页面内容。我真的不知道如何描述它，因此我将向您展示示例页面：

Twitter Bootstrap Sidebar右侧边栏。

Parse Android Documentation左侧边栏。

使用Twitter Bootstrap可以实现这一目标吗？如果是这样在线有一些例子吗？如果Twitter Bootstrap不可能有一些教程，我可以学习如何实现这种效果？

Answer 1

是的，它是，它被称为词缀。看看

http://getbootstrap.com/javascript/#affix

Answer 2

Bootstrap基于css / javascript。结果，可以实现。有两个关键的想法：

看看这些侧边栏上使用的css，看看它们是如何固定在一边的：

element.style { } @media (min-width: 992px) .col-md-3 { width: 25%; } @media (min-width: 992px) .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } user agent stylesheetdiv { display: block; } Inherited from body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } Inherited from html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } Pseudo ::before element :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

接下来，您需要实现用于滚动的javascript / jQuery事件，这将在适当时展开/折叠元素。

Answer 3

你的意思是这样吗

http://codepen.io/hellouniverse/pen/JWGgYJ

使用粘性js插件，如下所示

  // Make sidebar sticky
  $('.events-widget-menu').sticky({
    topSpacing: 10,
    bottomSpacing: 10,
    zIndex: 2
  });

随着内容滚动的粘滞侧边栏

3 个答案: