Question

Bootstrap有一个有趣的问题。我需要在我的网页上使用带有scrollspy的全屏框。这是JsFiddle上的DEMO。

这样可行，但引导程序的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

在slidelspy.js中

，您可以为最大框添加最大高度

  $.fn.scrollspy.Constructor = ScrollSpy

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

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

1 个答案: