divがページの上部に当たったときのJquery CSSの変更

Question

おはようございます！

今日私はこのコードに問題があります。 "#team"セクションがビューポート内にある場合、要素 ".cubo"が動くようにします。

私はこのコードを試してみました：

var team = $('#team').offset().top; 

$(window).on('scroll', function(){ 
     if ($(window).scrollTop() >= team) { 
      $('.cubo').css({top:"10%", left: "30%"}); 
     } else { 
      $('.cubo').css({top: "0", left:"0"}); 
     } 
    }); 

「#team」は、ビューポート内に既に存在するとき、私はページを更新する場合、それは正常に動作します...しかし、私は「#home」でスクロールするならば、それはdoesnのなぜなら、なぜか！

教えてください。教えてください。

は、あなたが、あなたはページをスクロール他のすべてをやっている、#teamのオフセットのみ、ページのロード時に取得しているあなたに

Answer 1

ありがとうございます。

オフセットvarを関数に移動して、スクロールのオフセットを再計算してみます。

$(window).on('scroll', function(){ 
    var team = $('#team').offset().top; 
    if ($(window).scrollTop() >= team) { 
     $('.cubo').css({top:"10%", left: "30%"}); 
    } else { 
     $('.cubo').css({top: "0", left:"0"}); 
    } 
}); 

Answer 2

おはよう、あまりにも！

私はあなたのjavascriptが動作すると思う、次のスニペットを参照してください。 HTMLとCSSを嘲笑するスニペットを投稿してください。私はそれがそれと関係していると思います！

var team = $('#team').offset().top; 
 

 
$(window).on('scroll', function(){ 
 
     if ($(window).scrollTop() >= team) { 
 
      $('.cubo').css({top:"10%", left: "30%"}); 
 
     } else { 
 
      $('.cubo').css({top: "0", left:"0"}); 
 
     } 
 
    });

#container { 
 
    height: 1000px; 
 
} 
 
.cubo { 
 
    position: fixed; 
 
} 
 
#team { 
 
    position: absolute; 
 
    top:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
<div class="cubo"> 
 
    CUBO 
 
    </div> 
 
    <div id="team"> 
 
    TEAM 
 
    </div> 
 
</div>