优化淡入淡出答案

【问题标题】：Optimizely fadeIn and fadeOut优化淡入淡出
【发布时间】：2015-09-03 18:59:48
【问题描述】：

在某个问题上寻求帮助，如果有任何有用的意见，我们将不胜感激。

我想让socialBox在点击#first时淡入，然后如果socialBox在#first之前或在.relevancy-widget之后淡出。我不确定我写错了什么，socialBox 没有以这种方式工作。此刻它会淡入，但不会淡出。是缓存问题吗？

请注意，Optimizely 需要使用“窗口”才能正常运行。

CSS

#socialBox {
  display: none;
  background-color: #2e2e2e;
  border-radius: 8px;
  height: 100px;
  position: fixed;
    width: 50px;
  top: 80px;
  margin-left: -50px;
  z-index: 999;
}
#socialBox > .share-buttons__button--facebook, #socialBox > .share-buttons__button--twitter {
  margin: 12px 0 4px 8.5px;
}
@media (max-width: 1000px) {
  #socialBox {
    display: none;
  }
  #triangle {
    display: none;
  }
}

jQuery

    var everything = [
      '<div id="socialBox">',
      '<a ng-click="shareOnFacebook()" class="share-buttons__button--facebook ng-click-active"><i class="cmplx-icon icon-facebook"></i></a>',
      '<a ng-click="shareOnTwitter()" class="share-buttons__button--twitter ng-click-active"><i class="cmplx-icon icon-twitter"></i></a>',
      '</div>'
    ].join('');

    $(".article__copy").append(everything);

    //give first paragraph an ID called "first"
    $(".article__copy > p:eq(2)").attr("id", "first");

    window.action = function() {
    $(window).scroll(function() {
        var distanceTop = window.$("#first").offset().top - window.$(window).height();
        var distanceBottom = window.$(".relevancy-widget").offset().top - window.$(window).height();
        if (window.$(window).scrollTop() > distanceTop) {
            window.$("#socialBox").fadeIn();
        }
        else if (window.$(window).scrollTop() > distanceBottom || window.$(window).scrollTop() < distanceTop) {
            window.$("socialBox").fadeOut();
        }
    });
};
window.action();

【问题讨论】：

标签： jquery css fadein fadeout optimizely

【解决方案1】：

解决了。

更改了条件，并错过了条件的第二个 socialBox 上的主题标签。以下是更改后的条件。

window.action = function() {
    $(window).scroll(function() {
        var distanceTop = window.$("#first").offset().top - window.$(window).height();
        var distanceBottom = window.$(".relevancy-widget__header").offset().top - window.$(window).height();
        if (window.$(window).scrollTop() > distanceTop && window.$(window).scrollTop() < distanceBottom) {
            window.$("#socialBox").fadeIn();
        }
    else {
            window.$("#socialBox").fadeOut();
        }
    });
};

【讨论】：