[英]Bootstrap scrollspy don't work when jQuery change box height
I have one interesting problem with Bootstrap. 我对Bootstrap有一个有趣的问题。 I need on my Web page to have fullscreen boxes with scrollspy.
我需要在我的网页上安装带有scrollspy的全屏框。 Here is DEMO on JsFiddle .
这是JsFiddle上的DEMO。
This works but bootstrap JavaScript does not notice the changes that make jQuery when resize boxes. 这可行,但是引导JavaScript不会在调整框大小时注意到使jQuery发生的更改。 Bootstrap only see 600px what I give like start value in CSS.
Bootstrap只看到600px我给的CSS起始值。 And when I scroll, my menu don't accurate display active values.
当我滚动时,菜单无法准确显示活动值。 Any help with this?
有什么帮助吗? Thanks!
谢谢!
MY CODE: 我的密码:
.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);
}
});
});
in the scrollspy.js you can add a max height for your maximum box 在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.