Отследить, что один элемент перекрыт другим
Здравствуйте
На странице есть фиксированный див и таблица. В ячейках строк находятся ссылки, которые через onclick добавляют текст в див. Див при этом увеличивается по высоте и перекрывает часть таблицы. Как можно отследить, что строка tr из которой кликнули, стала перекрыта дивом? и вывести например, после этого алерт Пожалуйста, помогите, вот пример
<style type="text/css">
tr {height:50px;}
</style>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:300px; background-color:#ccc;"><span id="sp" style='line-height:50px;'>Товар </span></div>
<table id="tab" style="width:300px;" border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>');">наименование 6</a></td><td>Lexus</td></tr>
</table>
|
rodiony4,
Походу косяк в условии или в реализации - див всегда перекрывает только первую строку |
rodiony4,
Наверно там в онклике разные line-height будут. 100, 150, 200 и тд И если это так то надо делить line-height который задается в after на 50 - и получишь номер строки |
Coriolan161, это только пример, без разницы, перекрывает див первую строку или нет. И line-height также, только для того чтобы изменить в примере высоту дива (на сайте line-height не будет)
Нужно отследить только ту перекрытую tr строку, из которой был сделан клик |
rodiony4,
<!DOCTYPE html
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
tr {height:50px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:310px; background-color:#ccc;"><span id="sp" style='line-height:50px; '>Товар </span></div>
<table id="tab" style="width:300px; " border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" onclick="$('#sp').after('<span style=\'line-height:100px;\'>продан </span>'); if($(this).offset().top < parseInt($('#fix').css('height'))) alert('Накрыло');">наименование 6</a></td><td>Lexus</td></tr>
</table>
</body>
</html>
|
Dilettante_Pro, на примере ваш онклик работает, а на сайте нет
пример я привел упрощенный, на сайте див фиксируется, когда достигнет верха экрана, а также в этом диве вложенная таблица, куда вставляется текст вот пример, максимально приближенный к странице сайта, посмотрите? див #sidebar - фиксируется когда достигнет верха экрана, в нем таблица в которую вставляется текст ваше условие в онклик изменил на:
if($(this).offset().top < parseInt($('#sidebar').css('height'))) alert('Накрыло');
|
или так, чтобы не пихать в каждую строку онклик с условием
<script type="text/javascript">
$('#sf tr').click(function(){
if($(this).offset().top < parseInt($('#sidebar').css('height'))){
alert('Накрыло');
};
});
</script>
но все равно грабли с дивом #sidebar - вложенная в него таблица, в которую вставляется текст и позиция fixed, которую он получает вверху экрана пАмАгите |
А вот так?
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
tr {height:50px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
$('#tab tr').on('click', function () {
$('#fix').css('height', '100px');
if (($(this).offset().top + tab.getBoundingClientRect().top) < parseInt($('#fix').css('height'))) alert('Накрыло');
})
})
</script>
</head>
<body style='height:2000px'>
<div id="fix" style="position:fixed; width:310px; height:50px; background-color:#ccc;"><span id="sp" >Товар </span>
<button onclick="$('#fix').css('height', '50px');" >Свернуть</button>
</div>
<table id="tab" style="width:300px; " border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:void(0)" >наименование 1</a></td><td>Audi</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 2</a></td><td>Chevrolet</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 3</a></td><td>Daewoo</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 4</a></td><td>Hyundai</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 5</a></td><td>Infiniti</td></tr>
<tr><td><a href="javascript:void(0)" >наименование 6</a></td><td>Lexus</td></tr>
</table>
</body>
</html>
|
Dilettante_Pro, нет, на сайте другая html разметка. Например, у дива нет высоты и в него вложена таблица
этот пример, максимально приближенный к странице сайта, я уже показывал вот почти тоже самое, но попроще ваш код не хочет работать по двум неизвестным мне причинам: 1) это вложенная таблица в диве #sidebar 2) это мой код js, который задает позицию fixed диву #sidebar, когда он касается верха экрана
<div id="table_wrap">
<!-- див с позицией 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>
<!-- /див с позицией 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 из которой кликнули, стала перекрыта дивом #sidebar
// эта функция не работает из за таблицы в диве #sidebar и кода для его фиксации у верха экрана, который ниже
$('#sf tr').click(function(){
if($(this).offset().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>
|
rodiony4,
обратите внимание, что в моем примере в пост9 уже другая проверка:
if (($(this).offset().top + tab.getBoundingClientRect().top) < parseInt($('#fix').css('height'))) alert('Накрыло');
Остальное - в понедельник (если вы не решите проблему раньше) |
| Часовой пояс GMT +3, время: 18:29. |