我正在使用JQuery:
$(window).resize(function() { ... });
Run Code Online (Sandbox Code Playgroud)
但是,似乎如果此人通过拖动窗口边缘来手动调整其浏览器窗口的大小以使其变大或变小,则.resize上述事件将多次触发.
问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)?
我正在尝试使用CSS Bootstrap 词缀和list-group菜单创建一个粘性菜单.
除了用户向下滚动时,我设法让大部分工作都能正常工作.
当用户向下滚动时,菜单似乎占据了整个页面.
我试图通过数据属性进行设置
用这样的东西
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但数据属性没有使菜单坚持!它只是保持在顶部.
所以我试着用JS来完成这样的工作
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
Run Code Online (Sandbox Code Playgroud)
我创建了jsFiddle来向您展示当前的行为.
如何解决这个问题,affix以便当用户向下滚动菜单时保持相同的形状?