Изменение класса в зависимости от положения дива
 

Доброго времени суток!
Данная функция должна менять класс элементов с "like_box" на "like_box_fixed". Первый имеет позицию relative, второй fixed. Но проблема в том, что одна функция должна менять классы у всех дивов, как только окно опуститься до него. Надеюсь на Вашу помощь, заранее благодарен.

$(function() {
		  var likeboxElem = document.getElementById('like_box');
		var offset = $("#like_box").offset();
		var topPadding = 30;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				
				  likeboxElem.className = "like_box";
			}
			else {
				likeboxElem.className = "like_box_fixed";
				;};});
			
	});

function getCoords(elem) {
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

function isVisible(elem) {

	var coords = getCoords(elem);
	var windowTop = window.pageYOffset || document.documentElement.scrollTop;
	var windowBottom = windowTop + document.documentElement.clientHeight;

	coords.bottom = coords.top + elem.offsetHeight;

	// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
	var topVisible = coords.top > windowTop && coords.top < windowBottom;
	var bottomVisible = coords.bottom < windowBottom && coords.bottom > windowTop;

	return topVisible || bottomVisible;
}

function showVisible() {
	var likeboxElem = document.getElementById('like_box');
		if (isVisible(likeboxElem)) {
			likeboxElem.className = "like_box_fixed";
		}
}

window.onscroll = showVisible

Соответственно в функции showVisible пилите то, что хотите.

Классически это делают так :$('div:eq(1)').animate({top:123px},function(){$('div':not($(this))).addClass('такой-то'))}')СИНТАКСИС исправь как нужно(Дримвивер высвечивает синтаксис как Ворд ошибки в тексте)

Я так подумал и понял, что совсем не правильно объяснил проблему. Попробовал отобразить желаемый результат на картинке. На одной странице есть несколько дивов с классом like_box, по мере того, как див появляется в поле зрения, его класс меняется на like_box_fixed , но он не должен выходить за рамки большего дива (parent).

http://javascript.ru/forum/misc/2898...kie-bloki.html
http://javascript.ru/forum/misc/2892...tml#post181794

А причем здесь
?

Deff, как всегда - спасибо. Липкие блоки именно то, что нужно.
danik.js, да, думаю ты прав, не при чем.

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>

В опере и FF не работает

Теперь работает (В FF точно)