如何在显示/隐藏项目后重新初始化多个粘滞标题

How to reinitialize Multiple Sticky Titles after showing/hiding items

本文关键字：初始化 标题 显示 项目 隐藏      更新时间：2023-09-26

我根据这个流行的代码笔示例中的代码创建了一个带有多个粘性标题的侧边栏：http://codepen.io/chrissp26/pen/gBrdo

粘性标题也是可点击的，点击时，我显示/隐藏与标题相关的项目。虽然粘性标题和展开/折叠相关项目都是功能性的，但当我将它们一起使用时，我会得到不希望的结果。以下代码用于处理粘性标题：

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");
                }
            }   
        });         
    }
}

我看到该函数正在计算与顶部的距离，因此当我折叠/展开项目时，相对于顶部的位置会发生变化。这就是导致不良用户体验的原因。我在单击事件中添加了以下代码，希望在折叠/展开项目后重新计算顶部的位置：

var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery('#container').on("scroll", function() {
    newStickies.scroll();
});

不幸的是，该位置似乎没有重新计算，而是使用扩展/折叠之前的位置。

我

创建了这个JSFiddle来演示我的问题：http://jsfiddle.net/vo78hr4x/1/

添加新的

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);
    });
}
相关文章：