Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Зафиксировать шапку таблицы html по условию (https://javascript.ru/forum/dom-window/52651-zafiksirovat-shapku-tablicy-html-po-usloviyu.html)

sashgera 29.12.2014 06:03
Зафиксировать шапку таблицы html по условию
 
Здравствуйте
Есть js который фиксирует див #sidebar по двум условиям:
если при прокрутке див #sidebar (в нем шапка таблицы) достигнет верха экрана
если див #table_wrap (в нем шапка и таблица) окажется больше окна браузера
<script type="text/javascript">
var jQnoC9 = jQuery.noConflict(); // query ноконфликт
function getTopOffset(e) { 
	var y = 0;
	do { y += e.offsetTop; } while (e = e.offsetParent);
	return y;
}
var block = document.getElementById('sidebar'); 
if ( null != block ) {
	var topPos = getTopOffset( block );
	window.onscroll = function() {
                if ( jQnoC9('#table_wrap').height() >= jQnoC9(window).height()  ) {  // если див #table_wrap окажется больше окна браузера - то div #sidebar становится фиксированным
			var newcss = (topPos < window.pageYOffset) ? 
				'top:0px; position: fixed;' : 'position:static;';
			block.setAttribute( 'style', newcss );
		}
	}
}
</script>

Также в таблице кнопкой скрываются и показываются строки, соответственно таблица меняет свою высоту, которая может оказаться больше или меньше окна браузера.

Все работает - если таблица больше окна браузера, то соответсвено шапка таблицы при прокрутке вверх становится фиксированной.
Скрываем кнопкой часть строк - таблица по высоте становится меньше и умещается в окно браузера, теперь при прокрутке вверх шапка не фиксируется.

Но есть проблема, если div #sidebar при прокрутке вверх получает фиксированную позицию, а затем кнопкой скрыть часть строк (теперь таблица уместилась в окне браузера), то по условию #sidebar должен изменить позицию fixed на static, но этого не происходит.

Пожалуйста, помогите решить проблему.
Вот пример: http://www.glass-pgc.ru/Untitled-2.html

рони 29.12.2014 11:40
Цитата:
Сообщение от sashgera
block.setAttribute( 'style', newcss );
 
block.style.cssText =  newcss

но раз используите jQuery так используйте по полной :cray:
условие высота элемента больше высоты окна + прокрутка окна больше 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>

sashgera 29.12.2014 18:43
рони, спасибо, но при прокрутке страницы, в зависимости от высоты окна браузера и высоты элемента #table_wrap - содержимое дива table_wrap дергается
тестировал в Mozilla, Opera, Google Chrome, IE

вот запись с экрана: http://youtu.be/J78u8_2MHjc
вот страница с вашем JS: http://www.glass-pgc.ru/Untitled-4.html
ну и на сайте также: http://www.glass-pgc.ru/price/test5.html

рони 29.12.2014 22:31
sashgera,
может смена класса у вас быстрее сработает ... больше вариантов у меня пока нет ... это лучше к специалистам по css.
<!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>
<style type="text/css">
.fix{
  position: fixed;
            top: 0 ;
}
</style>
<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() {

        jQnoC9('#sidebar').toggleClass('fix',(topPos < jQnoC9(window).scrollTop() && jQnoC9('#table_wrap').height() >= jQnoC9(window).height()))
    })
}
</script>

sashgera 29.12.2014 23:03
рони, с вашим новым вариантом таблица также дергается при прокрутке, но все равно спасибо!

- если окно браузера сделать чуть меньше по высоте содержимого дива table_wrap, срабатывает условие js - шапка получает позицию fixed. Но при этом шапка при прокрутке "дергается" - быстро меняется с fixed на static
- если окно браузера сделать еще меньше, пикселей на ~200 - то все нормально, шапка перестает "дергаться"

http://www.glass-pgc.ru/Untitled-6.html

sashgera 02.01.2015 03:43
Вопрос решен

рони 02.01.2015 03:47
Цитата:
Сообщение от sashgera
Вопрос решен
почему бы не опубликовать решение.

sashgera 02.01.2015 04:10
Цитата:
Сообщение от рони (Сообщение 349189)
почему бы не опубликовать решение.
к сожалению сделал не сам, помогли:
<script type="text/javascript">
var jQnoC8 = jQuery.noConflict(); // query ноконфликт
if (jQnoC8('#sidebar').length) {
    var tableSF_elem = jQnoC8('#sf');
    var heightTableWrap = jQnoC8('#table_wrap').height();
    var heightTable_Sf = tableSF_elem.height(); 
    var topPos = jQnoC8('#sidebar').offset().top;
    jQnoC8(window).scroll(function() {
        var newcss = (topPos < jQnoC8(window).scrollTop() && 
                     (heightTableWrap - ( heightTable_Sf - tableSF_elem.height() ))  >= 
                               jQnoC8(window).height()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC8('#sidebar').css(newcss)
    })
}
</script>
в работе выглядит так: [url]http://www.glass-pgc.ru/price/test5.html[/url]


Часовой пояс GMT +3, время: 00:27.