2014-10-06 59 views
0

我有一個Bootstrap有趣的問題。我需要在我的網頁上使用Scrollspy的全屏方框。這裏是JsFiddle的DEMO。當jQuery改變盒子高度時,Bootstrap scrollspy不起作用

這可以工作,但引導程序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); 
     } 
    }); 
}); 

回答

-1
在scrollspy.js

您可以添加一個最大高度爲您最大箱

$.fn.scrollspy.Constructor = ScrollSpy 

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