我的网站我想要'子导航'。因此,当您滚动到部分时,其工具栏将粘贴在主工具栏下方。我有这个工作,但我无法在初始化后更改顶部偏移。文档说:
词缀( '刷新')
将词缀与添加或删除元素结合使用时 从DOM中,您需要调用refresh方法:
但是当我尝试这个时,我得到了:
未捕获的TypeError:对象#没有方法'刷新'
这是我的代码:
$(function () {
$('.sec-nav').addClass("affix-top");
var adjustNavs = function (first) {
$('.sec-nav').each(function (){
var $p = $(this).closest('.sec');
var $$ = $p.prevAll('.sec');
console.log($$);
var h = 0;
$$.each(function () { h+=$(this).outerHeight();});
console.log(h);
if (first) {
$(this).affix({offset: {top: h}});
} else {
$(this).data('affix', {b: {options: {offset:{top: h}}}});
console.log(this);
$(this).affix('refresh')
}
});
}
adjustNavs(true);
$('.sec').bind('DOMSubtreeModified', function () {
adjustNavs();
});
});
我尝试了
的不同变体 $(this).data('affix', {b: {options: {offset:{top: h}}}});
,包括:
$(this).affix({offset: {top: h}});
我无法改变偏移量。你如何改变词缀插件的偏移量?感谢。
答案 0 :(得分:20)
我明白了。我没有动态更新偏移量,而是将偏移值更改为函数:
$(function () {
$('.sec-nav').addClass("affix-top").each(function (){
var $self = $(this);
var offsetFn = function () {
var $p = $self.closest('.sec');
var $$ = $p.prevAll('.sec');
var h = 0;
$$.each(function () { h+=$(this).outerHeight();});
return h;
}
$self.affix({offset: {top: offsetFn}});
});
});
现在当一个部分由于dom操作或窗口重新调整大小而改变时,由于函数返回值的改变,偏移量会自动改变。
答案 1 :(得分:2)
我简化了Fatmuemoo对一个更基本的案例的回答: 我的主页导航栏(默认引导程序#masthead)位于ID为#bg的大背景滑块下方。滑块的高度随3 css断点而变化。我们只是将#masthead的偏移量设置为等于滑块的高度。简单!
$('header#masthead').affix({ //sticky header at bottom of bg
offset: {
top: function(){return $("#bg").outerHeight();}
}
});
答案 2 :(得分:0)
怎么样:
$(window).off('.affix');
$("#ID_NAME")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");
$('#ID_NAME').affix({
offset: {
top: OTHER_VALUE
}
});