滚动** px后显示div fadein，从右向左移动** px

Question

如何在滚动n个像素后显示淡入淡出效果。 HTML代码是：

<div class="fleft process" id="fade5" style="display:none; position: ;">
    <div class="dot-circle row m0">
        <div class="icon-circle row m0">
            <img src="img/analytics.png" alt="people">
            <div class="row m0 hover-text">
                Smart Ideas<br>Steady Growth
            </div>
        </div>
    </div>
    <div class="row m0">5. Analytics</div>
</div>

css代码是：

<style>
    #fade5{
        margin-right: 50px;
    }
</style>

Jquery代码：

<script>
$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 2100) {
        $("#fade5").animate({right:100, opacity:"show"}, 5000);
    }
});
</script>

Answer 1

更好的方法是使用CSS过渡和不透明度。下来并备份。出于演示目的，我给出了100px阈值。

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 300)
      $("#fade").addClass('on');
    else
      $("#fade").removeClass('on');
  });
});

#fade {
  position: fixed;
  right: 0;
  background: #ccf;
  top: 10%;
  opacity: 0;
  transition: all 0.5s linear;
  width: 325px;
}

#fade.on {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
<p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
<div id="fade">
  <p>Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.</p>
  <p>However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.</p>
</div>