簡體   English   中英

jQuery更改框高度時,Bootstrap scrollspy不起作用

[英]Bootstrap scrollspy don't work when jQuery change box height

我對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);
        }
    });
});

在scrollspy.js中,您可以為最大框添加最大高度

  $.fn.scrollspy.Constructor = ScrollSpy

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM