0

問題に関するヘルプを探しており、有用な情報をいただければ幸いです。

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();
4

1 に答える 1

0

解決しました。

条件を変更し、条件の 2 番目の 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();
        }
    });
};
于 2015-09-03T20:13:38.690 に答える