ウィンドウがスクロール過去の要素

Question

私はサークルのdivは、ヘッダーにロックするときにユーザーがスクロールの過去。

私は、次のコードを使用していますが、それは

を動作しません。

var circle$ = $('.circle'), 
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true), 
    window$ = $(window); 

window$.scroll(function() { 
    if (window$.scrollTop() > oCircleBottom) { 

    } 
}.bind(this)); 

ユーザーがサークルdivをスクロールしたときにアクションを実行したいと思います。しかし、上記のコードは動作していないようです。 oCircleBottomは正しく計算されていますか？

Answer 1

あなたは、あなたのコードのdoesntの仕事を下にスクロールするのに十分なページの高さはイマイチかのために考慮にウィンドウの高さを取る必要がある

$(document).ready(function() { 
    var circle$ = $('.circle'), 
    oCircleBottom = circle$.offset().top + circle$.outerHeight(true), 
    window$ = $(window); 

    window$.scroll(function() { 
    if (window$.scrollTop() > oCircleBottom) { 
     $('.circle').css({      
      position: 'fixed', 
      top: '0', 
      left: '0' 
     }); 
    } 
    else{ 
       $('.circle').css({      
       position: 'static'}); 
    } 
    }.bind(this)); 

}); 

Answer 2

（ドキュメント）.ready関数$でコードを囲みます。 this example

ただし、ページの高さを上げると、コードはウィンドウの高さを引いても問題なく機能します。見てくださいthis example

したがって、ウィンドウの高さを減算することをお勧めします。 jsFiddle

$(window).bind('scroll', function() { 

    if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) { 
     //Do you stuff 
    } 
});