Question

寻找有关问题的帮助，并希望获得任何有用的输入。

如果社交框在#first之前或之后的.relevancy-widget之前，我希望社交框一旦点击#first然后淡出就会淡出。我不确定我写错了社交框不是这样做的。它暂时消失，但并没有淡出。这是一个缓存问题吗？

请注意使用＆＃34;窗口＆＃34;是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();

Answer 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();
        }
    });
};

优化fadeIn和fadeOut

1 个答案: