Javascript 如何在显示/隐藏项目后重新初始化多个粘性标题
我创建了一个侧边栏,其中包含多个粘性标题,这些标题基于此流行代码笔示例中的代码: 粘性的标题也可以单击,单击后,我将显示/隐藏与标题相关的项目。虽然粘性标题和展开/折叠相关项都是功能性的,但当我将它们一起使用时,会得到不想要的结果。以下代码用于处理粘性标题:Javascript 如何在显示/隐藏项目后重新初始化多个粘性标题,javascript,jquery,html,css,sticky,Javascript,Jquery,Html,Css,Sticky,我创建了一个侧边栏,其中包含多个粘性标题,这些标题基于此流行代码笔示例中的代码: 粘性的标题也可以单击,单击后,我将显示/隐藏与标题相关的项目。虽然粘性标题和展开/折叠相关项都是功能性的,但当我将它们一起使用时,会得到不想要的结果。以下代码用于处理粘性标题: function stickyTitles(stickies) { this.load = function() { stickies.each(function(){ var
function stickyTitles(stickies)
{
this.load = function()
{
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
this.scroll = function()
{
stickies.each(function(i){
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i+1),
prevSticky = stickies.eq(i-1),
pos = jQuery.data(thisSticky[0], 'pos') - 70;
if (pos <= jQuery('#container').scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery('#container').scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight() + 200) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
不幸的是,似乎没有重新计算位置,而是使用展开/折叠之前的位置
我创建了这个JSFIDLE来演示我的问题:在添加新的html内容后使用load函数
this.load = function()
{
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
this.load=function()
{
粘滞物。每个(函数(){
var thisticky=jQuery(this).wrap(“”);
thisticky.parent().height(thisticky.outerHeight());
jQuery.data(thisticky[0],'pos',thisticky.offset().top);
});
}
这里的stickies将改为stickies=jQuery(“.followMeBar”);
this.load = function()
{
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}