|
Сообщение от sashgera
|
|
block.setAttribute( 'style', newcss );
|
block.style.cssText = newcss
но раз используите jQuery так используйте по полной
условие высота элемента больше высоты окна + прокрутка окна больше offsetTop элемента
jQuery желательно новее чем 1.6.2.
<!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=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="table_wrap">
<div id="sidebar">
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="#00FFFF"><td>
- прокрутите страницу вниз - шапка таблицы получит позицию fixed <br>
- затем удалите часть строк (кнопка УДАЛИТЬ СТРОКИ)<br>
- прокрутите страницу вверх <br><br>
(теперь таблица уместилась в окне браузера), то по условию #sidebar должен изменить позицию fixed на static, но этого не происходит. <br>Как исправить?<br><br>
Шапка таблицы<br>
<input type="button" value="УДАЛИТЬ СТРОКИ" onclick="hideDiv();">
<input type="button" value="Показать ВСЕ строки" onclick="showDiv();">
</td></tr>
</table>
</div>
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr class="show_hide"><td>4</td></tr>
<tr class="show_hide"><td>5</td></tr>
<tr class="show_hide"><td>6</td></tr>
<tr class="show_hide"><td>7</td></tr>
<tr class="show_hide"><td>8</td></tr>
<tr class="show_hide"><td>9</td></tr>
<tr class="show_hide"><td>10</td></tr>
<tr class="show_hide"><td>11</td></tr>
<tr class="show_hide"><td>12</td></tr>
<tr class="show_hide"><td>13</td></tr>
<tr class="show_hide"><td>14</td></tr>
<tr class="show_hide"><td>15</td></tr>
<tr class="show_hide"><td>16</td></tr>
<tr class="show_hide"><td>17</td></tr>
<tr class="show_hide"><td>18</td></tr>
<tr class="show_hide"><td>19</td></tr>
<tr class="show_hide"><td>20</td></tr>
<tr class="show_hide"><td>21</td></tr>
<tr class="show_hide"><td>22</td></tr>
<tr class="show_hide"><td>23</td></tr>
<tr class="show_hide"><td>24</td></tr>
<tr class="show_hide"><td>25</td></tr>
<tr class="show_hide"><td>4</td></tr>
<tr class="show_hide"><td>5</td></tr>
<tr class="show_hide"><td>6</td></tr>
<tr class="show_hide"><td>7</td></tr>
<tr class="show_hide"><td>8</td></tr>
<tr class="show_hide"><td>9</td></tr>
<tr class="show_hide"><td>10</td></tr>
<tr class="show_hide"><td>11</td></tr>
<tr class="show_hide"><td>12</td></tr>
<tr class="show_hide"><td>13</td></tr>
<tr class="show_hide"><td>14</td></tr>
<tr class="show_hide"><td>15</td></tr>
<tr class="show_hide"><td>16</td></tr>
<tr class="show_hide"><td>17</td></tr>
<tr class="show_hide"><td>18</td></tr>
<tr class="show_hide"><td>19</td></tr>
<tr class="show_hide"><td>20</td></tr>
<tr class="show_hide"><td>21</td></tr>
<tr class="show_hide"><td>22</td></tr>
<tr class="show_hide"><td>23</td></tr>
<tr class="show_hide"><td>24</td></tr>
<tr class="show_hide"><td>25</td></tr>
</table>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
var jQnoC9 = jQuery.noConflict(); // query ноконфликт
function hideDiv() {
jQnoC9('.show_hide').hide();
jQnoC9(window).scroll()}
function showDiv() {
jQnoC9('.show_hide').show();
jQnoC9(window).scroll()}
if (jQnoC9('#sidebar').length) {
var topPos = jQnoC9('#sidebar').offset().top;
jQnoC9(window).scroll(function() {
var newcss = (topPos < jQnoC9(window).scrollTop() && jQnoC9('#table_wrap').height() >= jQnoC9(window).height()) ? {
position: 'fixed',
top: 0
} : {
position: 'static'
};
jQnoC9('#sidebar').css(newcss)
})
}
</script>