[英]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.