Optimizely fadeIn and fadeOut

Question

Looking for help on an issue, and would appreciate any useful input.

I'd like to make the socialBox fade in once it hits #first then fade out if the socialBox goes before #first or after .relevancy-widget. I'm not sure what I'm writing wrong that the socialBox is not working this way. It fades in at the moment, but is not fading out. Is it a caching issue?

Please note that the use of "window" is required for Optimizely to run properly.

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

score 0 · Answer 1 · answered Sep 03 '15 at 20:13

Solved.

Changed condition, and missed the hashtag on the second socialBox of the conditional. Below is the changed condition.

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

Optimizely fadeIn and fadeOut

1 Answers1