Показать сообщение отдельно
  #8 (permalink)  
Старый 17.02.2013, 14:49
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

1) Не jQuery
2) Не кроссбраузерно
3) Просто демка.

<style>
    div{
        height: 50px;
        margin: 100px 0;
        border: 1px dotted gray;
    }
    span{
        position: fixed;
        top: 10px;;
        right: 10px;
        padding: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        text-shadow: 1px white;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
</style>
<span></span>
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<script>
var blocks = document.getElementsByTagName('div');
var span = document.getElementsByTagName('span').item(0);


function update() {
    var messages = [];
    for (var i=0; i < blocks.length; i++) {
        var rect = blocks[i].getBoundingClientRect();
        var visible = rect.bottom > 0 && rect.top < window.innerHeight;
        messages[i] = 'Блок ' + (i+1) + (visible ? ' видим' : ' невидим');
    }
    span.innerHTML = messages.join('<br>');
}

window.addEventListener('scroll', update);
update();
</script>

Последний раз редактировалось danik.js, 17.02.2013 в 15:47.
Ответить с цитированием