А вот так?
<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>