Форум

rodiony4 · #11 (**permalink**) 14.10.2016, 19:05

Dilettante_Pro, новую проверку я протестил - не хочет работать, наверное по тем же причинам

rodiony4 · #12 (**permalink**) 15.10.2016, 17:05

Не уверен, что это лучшее решение, но оно работает

$('#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)!');
	};
});

Dilettante_Pro · #13 (**permalink**) 17.10.2016, 10:45

rodiony4,
Не вижу принципиальных отличий в этом решении от моего первого варианта.
Единственная разница - добавлен сдвиг sidebar от начала страницы

var sidebarPartTop = $('#sidebar').offset().top;

Я этого не делал, т.к. показывал несколько упрощенный вариант, а это достаточно очевидное добавление.
(И, кстати, ненужное - см.пример в следующем посте)

Dilettante_Pro · #14 (**permalink**) 17.10.2016, 12:05

<!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>

rodiony4 · #15 (**permalink**) 17.10.2016, 13:47

Dilettante_Pro, да, все работает, большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript