jQuery：インプレッションにクラスをロード

Question

私はデフォルトで私のウェブサイトにコメントを読み込まない機能を実装しています。ユーザーがページの一番下までスクロールした場合にのみ、コメントが読み込まれます。

以下のコードスニペットでは、click()と置き換えてください。コメントはユーザーの印象がdivになるようにしてください。

<div class="show-comments"></div> 

<script> 
    $(document).ready(function() { 
     $('.show-comments').on('click', function() { 
      // load comments code 
     }); 
    }); 
</script> 

Answer 1

は、あなたのスクロール可能な要素のscrollイベントをチェックして、スクロール位置は、あなたが望む位置に到達した場合は、コメントを表示することができます。ここでは、この作業であなたを案内する例をしている：ここでは、あなたの機能を表示するa working exampleを持っている

HTMLコード

<div id="container"><!-- Your content --></div> 
<div id="comments"><!-- Your comments here --></div> 

jQueryのコード

var body = $("body"), 
    comments = $("#comments"), 
    win = $(window), 
    near = 20, 
    delay = NaN; 

//---Show comments 
function showComments() { 

    comments.slideDown(); 

    win.off("scroll"); 

} 

//---Check comments visibility 
function checkCommentsVisibility() { 

    if (!isNaN(delay)) { 
     clearTimeout(delay); 
    } 

    delay = setTimeout(function() { 

     var scrollHeight = body[0].scrollHeight - win.height(); 
     var scrollTop = body.scrollTop(); 

     if (scrollTop > scrollHeight - near) { 

      showComments(); 

     } 

    }, 100); 

} 

//---Scroll event 
win.on("scroll", checkCommentsVisibility); 

。

しかし、Ajaxでコメントを読み込む場合は、スクロール位置によっては、Scroll Magicのようなプラグインを使用することをおすすめします。