Question

我根据这个流行的代码集示例中的代码创建了一个带有多个粘性标题的侧边栏：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");
                }
            }   
        });         
    }
}

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

var newStickies = new stickyTitles(jQuery(".followMeBar"));

newStickies.load();

jQuery('#container').on("scroll", function() {
    newStickies.scroll();
});

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

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

Answer 1

添加新的html contnent后使用加载功能

..
@XmlRootElement(name="MSEPObtenerPolizaFechaDTO")
@XmlAccessorType(XmlAccessType.FIELD)

public class MSEPObtenerPolizaFechaDTO implements Serializable {
..

public void beforeUnmarshal(Unmarshaller unmarshaller, Object parent) throws JAXBException, IOException, SAXException {
        unmarshaller.setSchema(Utils.getSchemaFromContext(this.getClass()));
        unmarshaller.setEventHandler(new CustomEventHandler());
  }

  public void afterUnmarshal(Unmarshaller unmarshaller, Object parent) throws JAXBException {
        unmarshaller.setSchema(null);
        unmarshaller.setEventHandler(null);
  }

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

1 个答案: