Оптимизация fadeIn и fadeOut

Question

Ищите помощь по проблеме и оцените любой полезный ввод.

Я хочу, чтобы SocialBox исчезал, когда он набирает # first, затем исчезает, если socialBox идет до # первого или после .relevancy-widget. Я не уверен, что я пишу неправильно, что SocialBox не работает таким образом. В настоящее время он исчезает, но не исчезает. Это проблема кеширования?

Обратите внимание: для правильной работы Оптимизации необходимо использовать «окно».

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

решаемая.

Изменено состояние и пропустили хэштег на втором социальном поле условного. Ниже приведенное условие.

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