要素が別の要素を継承するときを知る方法はありますか？

Question

私は画面から消えるために別の要素の上を通過するときに認識する必要のある粘着性要素を持っています。

これは消えるはずな要素である。

.sticky-footer 
    .container 
     .row.sticky-row 
      .col-xs-6 
       // text 
      .col-xs-6 
       // text 

ユーザーがスクロールダウンして、それがこの要素の上を通過：

hr#line-before-related-article 

は、CSSやjQueryを使ってこれを行う方法はあります？

Answer 1

ページがスクロールされるたびに発生するイベントをリッスンし、その位置がhr＃line-before-related-articleより古いかどうかを確認できます。

ここでは例です：...あなたは、もう少しパフォーマンス何かをしたい場合、あなたはデバウンス機能と呼ばれるものを使用することができます

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

    if ($(this).scrollTop() + $(this).height() >= $('#line-before-related-article').position().top) { 

     $('.sticky-footer').hide(); 

    } else if ($('#line-before-related-article').position().top >= $(this).scrollTop()) { 

     $('.sticky-footer').show(); 
    } 
}) 

ない人のために

デバウンス機能が何をしているかを知っていれば、機能が発動できる速度を制限します。簡単な例：ウィンドウ上にリサイズ・リスナーがあり、いくつかの要素次元の計算と（場合によっては）再配置のいくつかの要素があります。それはそれ自体重労働ではありませんが、多数のサイズ変更の後に繰り返し発射されると、あなたのサイトは本当に遅くなります。なぜ機能が発射できる速度を制限しないのですか？ここでその上

詳細は：https://davidwalsh.name/javascript-debounce-function