ワードプレスのスクロールで特定のdivを表示する

Question

ショートコード（div id #oter）でフッターを作成しました。ロード時には表示せず、onscrollで表示する必要があります。 今、私はこれはプラグインで持っている：私は

!function(e){e(document).ready(function(){var n=0;e(window).scroll(function(){var o=e(this).scrollTop();o>n?e("#oter").fadeOut(200):e("#oter").fadeIn(200),n=o})})}(jQuery); 

に変更することができますonloadイベント隠されonscroll表示しますか？ 私を助けることができますか？ ありがとう！

Answer 1

私はこれをCSSでデフォルトで非表示にしてからスクロールすると、それを表示する新しいクラスを追加します。

$(function() { 
    var footerslider = $("#oter"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 500) { 
      footerslider.addClass('show'); 
     } else { 
      footerslider.removeClass("show"); 
     } 
    }); 
}); 

UPDATE：

コンソールエラーを取得している...にコードをアップデートしてみてください：

**あなたはif文の内部で値を変更する必要があることに注意してくださいクラスが右のスクロールポイントで追加されるようにします。

jQuery(function($) { 
    var footerslider = $("#oter"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 10) { 
      footerslider.addClass('show'); 
     } else { 
      footerslider.removeClass("show"); 
     } 
    }); 
}); 

し、あなたのスタイルシートに次のCSSを追加します。

#oter { 
    display:none; 
} 

.show { 
    display:block !important; 
}