Перемещение элементов

[Johny]

Всем доброго времени суток. Столкнулся со следующей проблемой: есть чекбоксы с одним класом и разными id. Все они распололжены вертикально. На данный момент возле первого при загрузке страницы появляется подсказка. Возможно ли сделать так, чтобы при скролинге или перемещении страницы вниз если эта подсказка скрывается(становится не видна из-за скрола) выводить у того чекбокса, который виден?На сколько я понимаю, можно брать $(window).scrollTop() и когда она становится равной абсолютному положению чекбокса переходить на следующий. Но как определить абсолютное положение так и не понял. Спасибо.

[Aetae]

http://javascript.ru/ui/offset

[Johny]

Aetae, спасибо. Получился следующий код

$(window).scroll(function () {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		var el = document.getElementsByClassName('checkbox-check')[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
    });
    
	$(document).ready(function(){
		var position = $('.checkbox-check').offset();
		var top = position.top;
		$("#tooltip-checkbox-check").css("top",top + 20).css("left","806px").show();
	});

Но первый элемент задействуется только вначале...Не подскажите как можно это исправить?

[Johny]

Если кому интересно:

$(window).scroll(function () {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		var el = document.getElementsByClassName('checkbox-check')[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (i == 0 && top_el > 0)
    		{
        		var position_next = $('.checkbox-check').eq(0).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
    });

[Johny]

Теперь всё везде работает. Сори за флуд.

window.onscroll = scrollEvent;
	function scrollEvent() {
    	var i;
    	var j = $(".checkbox-check").length;
    	for (i=0;i<j;i++)
    	{
    		//var el = document.getElementsByClassName('checkbox-check')[i];
    		var el = $(".checkbox-check")[i];
    		var br = el.getBoundingClientRect();
    		var top_el = br.top;
    		if (i == 0 && top_el > 0)
    		{
        		var position_next = $('.checkbox-check').eq(0).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    		if (top_el <= 0)
    		{
        		var position_next = $('.checkbox-check').eq(i+1).offset();
        		if (position_next != null)
        		{
	        		var top = position_next.top + 17;
	        		$("#tooltip-checkbox-check").css("top", + top);
        		}
    		}
    	}
	}

[Matre]

Попробуйте в .css() указывать величину в пикселах, а не просто число.

Т.е. .css("top", top + "px");

[Johny]

Попробуйте в .css() указывать величину в пикселах, а не просто число.

Т.е. .css("top", top + "px");

Спасибо, но проблема была в кроссбраузерности...FF сразу все слопал за радость, а остальные, например, ie только после замены

document.getElementsByClassName('checkbox-check')[i]

на

$(".checkbox-check")[i]

и назначения на js

window.onscroll = scrollEvent

, т.к. jquery

$(window).scroll

он не хотел понимать почему-то...