javascript - 下にスクロールした後、DIV が表示されなくなったらすぐに常に DIV を表示しますか?

Question

ユーザーが自分の Web サイトを開くと、画面に情報ボックス (div) が表示されます。ユーザーが下にスクロールし、ボックスがユーザーに表示されなくなるとすぐに、スクロール中に常にボックスを右上隅に表示したいと考えています。

常に見えるようにする方法を知っています（位置：固定）。問題は、スクロール中にユーザーに表示されないことをどのように知ることができるかということです。役立つ場合は、JavaScript を使用することもできます。プロトタイプ JS の方が好きです。

ありがとう！

Answer 1

getBoundingClientRect()ビューポートに対する要素の位置を返すを使用する必要があります。top値が 未満の場合は0、修正する必要があります。

HTML:

<div id="stick">
    I should be fixed… sometimes
</div>

CSS:

#stick {
    position: absolute;
    top: 60px;
}

#stick.fixed {
    position: fixed;
    top: 0;
}

JS:

var stick = document.getElementById('stick');

window.onscroll = function(){
    if(stick.getBoundingClientRect().top < 0){
        stick.className = 'fixed';
    } else if(stick.className.indexOf('fixed') < 0){
        stick.className = '';
    }
}

ここにデモがあります。