Dilettante_Pro, новую проверку я протестил - не хочет работать, наверное по тем же причинам
|
Не уверен, что это лучшее решение, но оно работает
$('#sf tr').click(function(){ // узнаем высоту дива #sidebar var sidebarHeight_1 = $('#sidebar').outerHeight(); // узнаем расстояние верхней части #sidebar до начала страницы var sidebarPartTop = $('#sidebar').offset().top; // узнаем расстояние нижней части #sidebar до начала страницы var sidebarPartBottom = sidebarPartTop + sidebarHeight_1; // узнаем расстояние верхней части строки #sf tr (в которой был клик) до начала страницы var sf_trPartTop = $(this).offset().top; // если расстояние до начала страницы (у нижней части #sidebar) будет больше расстояния (верхней части строки #sf tr) - выводим алерт if(sidebarPartBottom > sf_trPartTop){ alert ('строка (#sf tr) перекрыта (дивом #sidebar)!'); }; }); |
rodiony4,
Не вижу принципиальных отличий в этом решении от моего первого варианта. Единственная разница - добавлен сдвиг sidebar от начала страницы var sidebarPartTop = $('#sidebar').offset().top; Я этого не делал, т.к. показывал несколько упрощенный вариант, а это достаточно очевидное добавление. (И, кстати, ненужное - см.пример в следующем посте) |
<!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> |
Dilettante_Pro, да, все работает, большое спасибо!
|
Часовой пояс GMT +3, время: 10:34. |