Skip to main content
 首页 » 编程设计

jquery之当我向下滚动时,Twitter bootstrap 附加的侧边栏会折叠

2026年10月07日3txw1958

我正在尝试创建一个类似于 Twitter Bootstrap 文档中的侧边栏:http://twitter.github.com/bootstrap/getting-started.html

我已经使词缀正常工作,但是每当您滚动经过数据偏移量时,栏就会折叠,因为它没有。

HTML

<div class="span3"> 
          <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar"> 
            <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li> 
            <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li> 
            <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li> 
            <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li> 
          </ul> 
          <p></p> 
       </div> 

更少

    // For Affix plugin 
.affix { 
  position: fixed; 
  top: (@navbarHeight * 1.8) + @navbarPadding + 25px; 
} 
 
.docs-sidebar { 
    width: (@gridColumnWidth * 4); 
} 

这使得侧边栏具有固定的 span4 宽度,但不会使其具有响应能力。我如何确保它具有响应能力?

请您参考如下方法:

我也在尝试找出最好的方法来做到这一点。这就是我所做的。也许不是最好的解决方案,但它确实有效。

我有一个两列布局,我希望左侧为.affix。我将列从行中拉出以固定,并将其放在原来的行上方。我通过添加 .offset3 将剩余的列移回原位。我将 .affix 放在 div 列上而不是 ul 上。然后我将固定列包裹在一个 div 中,CSS 为position:absolute; (位于 .row div 内部和 .col3 div 外部)这会将两个 .row div 重叠,其中一个固定,另一个滚动。