Показать сообщение отдельно
  #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
Ответить с цитированием