Bootstrap scrollspy don't work when jQuery change box height

Question

I have one interesting problem with Bootstrap. I need on my Web page to have fullscreen boxes with scrollspy. Here is DEMO on JsFiddle .

This works but bootstrap JavaScript does not notice the changes that make jQuery when resize boxes. Bootstrap only see 600px what I give like start value in CSS. And when I scroll, my menu don't accurate display active values. Any help with this? Thanks!

MY CODE:

.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

in the scrollspy.js you can add a max height for your maximum box

  $.fn.scrollspy.Constructor = ScrollSpy

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