Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.12.2014, 06:03
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Зафиксировать шапку таблицы 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
Ответить с цитированием
  #2 (permalink)  
Старый 29.12.2014, 11:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Сообщение от 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>

Последний раз редактировалось рони, 29.12.2014 в 11:42.
Ответить с цитированием
  #3 (permalink)  
Старый 29.12.2014, 18:43
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

рони, спасибо, но при прокрутке страницы, в зависимости от высоты окна браузера и высоты элемента #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
Ответить с цитированием
  #4 (permalink)  
Старый 29.12.2014, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

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>
Ответить с цитированием
  #5 (permalink)  
Старый 29.12.2014, 23:03
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

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

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

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

Последний раз редактировалось sashgera, 30.12.2014 в 01:00.
Ответить с цитированием
  #6 (permalink)  
Старый 02.01.2015, 03:43
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Вопрос решен
Ответить с цитированием
  #7 (permalink)  
Старый 02.01.2015, 03:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Сообщение от sashgera
Вопрос решен
почему бы не опубликовать решение.
Ответить с цитированием
  #8 (permalink)  
Старый 02.01.2015, 04:10
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Сообщение от рони Посмотреть сообщение
почему бы не опубликовать решение.
к сожалению сделал не сам, помогли:
<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]
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсветка строк и столбцов таблицы html sashgera Элементы интерфейса 8 20.12.2014 20:47
Как зафиксировать ячейки th при прокрутке таблицы по вертикали pavenko_sv jQuery 3 16.12.2013 16:39
Фиксировать шапку у таблицы darl jQuery 1 01.10.2013 09:07
График highslide из html таблицы kostyara Элементы интерфейса 4 24.11.2012 15:59
Конвертация txt таблицы в html gaiver Общие вопросы Javascript 95 09.03.2009 22:19