javascript - 当 jQuery 更改框高度时，Bootstrap scrollspy 不起作用

Question

我有一个关于 Bootstrap 的有趣问题。我需要在我的网页上有带有 scrollspy 的全屏框。这是JsFiddle上的演示.

这有效，但是 Bootstrap JavaScript 不会注意到在调整框大小时使 jQuery 发生的变化。 Bootstrap 只能看到 600px 我在 CSS 中给出的起始值。当我滚动时，我的菜单不会准确显示事件值。有什么帮助吗？谢谢!

我的代码:

.content-wrapper{
    display:table;
    width:100%;
    color:black;
    text-align:center;
    margin:0 0 0 0 !important;
    padding:0px !important;
    height:auto;
    min-height:850px;
}
.content-wrapper > .content{
    width:100%;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    font-size:100%;
    font-weight:bold;
    padding:40px 0 0 0;
    height:auto;
}



<div class="collapse navbar-collapse" id="cf-navigation-top-bar">
        <ul class="nav navbar-nav navbar-right">
                <li><a href="#c1">Content 1</a></li>
                <li><a href="#c2">Content 2</a></li>
                <li><a href="#c3">Content 3</a></li>
        </ul>
</div>

<div class="content-wrapper" id="c1">
    <div class="content">
            Content 1
    </div>
</div>
<div class="content-wrapper" id="c2">
    <div class="content">
            Content 2
    </div>
</div>
<div class="content-wrapper" id="c3">
    <div class="content">
            Content 3
    </div>
</div>

$("body").scrollspy({target: "#cf-navigation-top-bar"});

var BrowserSize=function(a){
    var b=new Array();
    b["height"]=$(window).height();
    b["width"]=$(window).width();
    return b[a];
};
$(document).ready(function(){
    $(".content-wrapper, .content-wrapper > .content").each(function() {
        var boxHeight = $(this).height();
        if(boxHeight > BrowserSize("height"))
        {
            $(this).css("height","auto");
        }
        else
        {
            $(this).css("height",BrowserSize("height")+1);
        }
    });
});
$(window).resize(function(){
    $(".content-wrapper, .content-wrapper > .content").each(function() {
        var boxHeight = $(this).height();
        if(boxHeight > BrowserSize("height"))
        {
            $(this).css("height","auto");
        }
        else
        {
            $(this).css("height",BrowserSize("height")+1);
        }
    });
});

Answer 1

在 scrollspy.js 中，您可以为最大框添加最大高度

  $.fn.scrollspy.Constructor = ScrollSpy

  $.fn.scrollspy.defaults = {
    offset: 10,
    height: 900px //<-change the height here
  }