jquery - 优化淡入和淡出

寻求有关问题的帮助，希望对您有所帮助。

我想让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();

最佳答案

解决了。

更改了条件，并错过了条件的第二个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();
        }
    });
};