Bootstrap 3 - 带有侧边栏的 Scrollspy答案

【问题标题】：Bootstrap 3 - Scrollspy with sidebarBootstrap 3 - 带有侧边栏的 Scrollspy
【发布时间】：2013-09-20 10:05:24
【问题描述】：

我正在使用 Bootstrap 3。我想重新创建与 documentation on the Bootstrap site 中的侧边栏相同的功能。

下面是我的代码，也在这里：http://bootply.com/82119

两个问题。

当您向下滚动页面经过每个部分时，侧边栏项目不会突出显示。
当您单击侧边栏项目时，它会跳转到相关锚点，但一半内容不可见。更改 data-offset 值似乎没有效果。

我做错了什么？

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group navbar" id="sidebar">
                <ul class="nav" id="mynav">
                    <li><a href="#c1" class="list-group-item">
                          Content 1
                        </a>
                    </li>
                    <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
                        </a>
                    </li>
                    <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
                        </a>
                    </li>
                    <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
                        </a>
                    </li>
                    <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
                <h2 id="c1" class="">Content 1</h2>
At Bootply we attempt to build simple Bootstrap templates that utilize...
            <hr class="col-md-12">
                    <h2 id="c2" class="">Content 2</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c3" class="">Content 3</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c4" class="">Content 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
                    <h2 id="c5" class="">Content 5</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </div>
    </div>
</div>

【问题讨论】：

stackoverflow.com/questions/18799688/…的可能重复
@BassJobsen - 会看看。但它只会解决上面提到的问题 #2。
是的，但示例代码也有#1 的“解决方案”。顺便说一句，对于＃1，我认为您应该通过<body data-spy="scroll" data-target="#sidebar"> 将其应用到身体上
您不需要在 Bootstrap 2.3 中将其应用到正文 - 请参阅此示例：bootply.com/60228。这是 Bootstrap 3 的限制吗？
我为您的示例尝试了<body data-spy="scroll" data-target="#sidebar">，它有效（请注意，您没有为 #sidebar 定义样式。活动）。 bootply 不起作用，但我不认为这是一个限制。在你的情况下，身体滚动。在getbootstrap.com/javascript/#scrollspy 的示例中，元素 (.scrollspy-example) 滚动（具有溢出：auto）。

标签： jquery twitter-bootstrap twitter-bootstrap-3 scrollspy

【解决方案1】：

您的问题似乎并不重复。你可以试试这样：http://bootply.com/82265

当您单击子导航中的链接时，内容将隐藏在导航栏后面。我将您的内容项包装在一个额外的 div 中。通过这样做，我可以为其添加一个 padding-top。填充使 h2 可见：

var clicked = false;
$('#mynav li a').click(
function(){
    $('#mycontent > div > h2').css('padding-top',0);
    $($( this ).attr('href') + ' > h2').css('padding-top','50px');
    clicked = true;
    }
);  

$('body').on('activate.bs.scrollspy', function () {
   if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
  clicked = false;
})

我发现的问题是撤消填充顶部的方法。我不能使用滚动事件，因为在添加填充后，词缀会触发滚动事件。撤消“activate.bs.scrollspy”似乎有效。

在 bootply 中，我通过 $('body').scrollspy({ target: '#sidebar', offset:80 }); 添加滚动间谍，您也可以使用 <body data-spy="scroll" data-target="#sidebar">。我不确定 scrollspy 偏移的正确值是多少。 70 似乎有些工作。

请注意，我也是您最后一个内容项的最小高度，否则您无法滚动最后 2 个项目。

我认为以上内容更多是某种概念证明，而不是真正的答案。

注意 Bootstrap 的文档也会有同样的问题。他们通过默认情况下在主题之间添加额外的空白来解决此问题，请参阅：

将在 docs.css 中添加额外的空白：

h1[id] {
    margin-top: -45px;
    padding-top: 80px;
}

另见：https://github.com/twbs/bootstrap/issues/10670

【讨论】：

【解决方案2】：

我遇到了同样的问题，最终通过捕获导航链接上的点击、阻止浏览器处理点击以及手动滚动到针对页面布局调整的位置处的目标元素来解决它。代码如下：

        // figure out a nice offset from the top of the page
        var scrollTopOffset = $('#main-nav-banner').outerHeight() + 50;
        // catch clicks on sidebar navigation links and handle them
        $('.bs-sidebar li a').on('click', function(evt){
            // stop the default browser behaviour for the click 
            // on the sidebar navigation link
            evt.preventDefault();
            // get a handle on the target element of the clicked link
            var $target = $($(this).attr('href'));
            // manually scroll the window vertically to the correct
            // offset to nicely display the target element at the top
            $(window).scrollTop($target.offset().top-(scrollTopOffset));
        });

scrollTopOffset 变量确定项目滚动到顶部的距离 - 您可能需要根据页面布局调整值的计算。在上面的示例中，我使用了页面顶部主导航横幅的高度，并添加了 50 像素，因为这“看起来不错”。

除了在上面添加额外的 sn-p 之外，无需修改 HTML 或更改初始化 scrollspy 功能的方式。

对我来说，它在 Bootstrap v3.0.0 下运行得非常好 - 我希望这对其他人也有用！

【讨论】：