<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://www.glass-pgc.ru/components/com_vm_ext_search_pro/js/jquery-1.6.2.min.js"></script>
<style type="text/css">
</style>
<body style='height:2000px'>
<div id="table_wrap">
<!-- див #sidebar с позицией fixed у верха экрана -->
<div id="sidebar" style="width:300px; background-color:#ccc;">
<table class="tab_decode" id="tab_decode" style="width: 100%;" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Марка и модель а/м:</td>
<td id="marka_decode"></td>
</tr>
<tr>
<td>Тип стекла:</td>
<td id="typeGlass_decode"></td>
</tr>
</table>
</div>
<!-- /див #sidebar с позицией fixed у верха экрана -->
<table id="sf" style="width:300px;" border="1" cellspacing="0" cellpadding="0">
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 1</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 2</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 5</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 6</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 7</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 8</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 9</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 10</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 11</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 12</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 15</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 14</a></td><td>Daewoo</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 15</a></td><td>Hyundai</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 16</a></td><td>Infiniti</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 17</a></td><td>Lexus</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 18</a></td><td>Audi</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#typeGlass_decode').after('лобовое стекло для легкового автомобиля ');">наименование 19</a></td><td>Chevrolet</td></tr>
<tr><td height="55"><a href="javascript:void(0)" onclick="$('#marka_decode').after('автомобиль иностранного производства ');">наименование 20</a></td><td>Daewoo</td></tr>
</table>
</div>
<script type="text/javascript">
// отследить, что строка tr из которой кликнули, стала перекрыта дивом
$('#sf tr').click(function () {
if (($(this).offset().top + sf.getBoundingClientRect().top) < parseInt($('#sidebar').css('height'))) {
alert('Накрыло');
};
});
//шапка таблицы (#sidebar) получает позицию fixed у верха экрана только в том случае,
//если контейнер #table_wrap будет больше по высоте окна браузера, в противном случае - static
if ($('#sidebar').length) {
var tableSF_elem = $('#sf');
var heightTableWrap = $('#table_wrap').height();
var heightTable_Sf = tableSF_elem.height();
var topPos = $('#sidebar').offset().top;
$(window).scroll(function () {
var newcss = (topPos < $(window).scrollTop() &&
(heightTableWrap - (heightTable_Sf - tableSF_elem.height())) >=
$(window).height()) ? {
position: 'fixed',
top: 0
} : {
position: 'static'
};
$('#sidebar').css(newcss)
})
}
</script>
</body>
</html>