Wordpress 滾動淡入/淡出（上下）

Question

當您在我的 Wordpress 網站上向上/向下滾動時，我希望 div 淡入/淡出。 已經在網上找到了這種變化，但不是我想要的。

到目前為止我管理的代碼

css

.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}
 .fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
 }

java（雖然沒有寫Wordpress）：

function FadeInSection(props) {
 const [isVisible, setVisible] = React.useState(true);
 const domRef = React.useRef();
React.useEffect(() => {
 const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => setVisible(entry.isIntersecting));
 });
 observer.observe(domRef.current);
 return () => observer.unobserve(domRef.current);
}, []);
return (
 <div
  className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
  ref={domRef}
 >
  {props.children}
 </div>
);
}

（沙箱代碼和原作者在這里： https://codesandbox.io/s/beautiful-wiles-k23w5?from-embed ）

這可以完美地向下滾動，但我想要相同的動畫/過渡向上滾動（屏幕中間只有 2/3 div 可見）

尋找正確的方法，幫助尋找資源來實現這一目標。

Answer 1

嘗試使用我的解決方案。 將淡入淡出 class 賦予您想要淡入/淡出的元素並應用此：

 $(document).ready(function() { $(window).scroll(function() { var windowBottom = $(this).scrollTop() + $(this).innerHeight(); $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")==0) { $(this).fadeTo(500,1); } }else{ if ($(this).css("opacity")==1) { $(this).fadeTo(500,0); } } }); }); });

 .fade { margin: 50px; padding: 50px; background-color: red; opacity: 0; width: 150px; height: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div>

Answer 2

jQuery(window).scroll(function () {
    var y = jQuery(this).scrollTop();
    if (y > 500) {
        jQuery('.a2a_floating_style.a2a_vertical_style').show();
    } else {
        jQuery('.a2a_floating_style.a2a_vertical_style').fadeOut();
    }
});