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