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

Горизонтальный скролл дива с позицией fixed
Здравствуйте
есть фиксированный див, под ним див без позиции:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
.wrap {width:1200px;}
.left_block {float:left; width:300px; height:1600px; background:#09F;}
.right_block {float:right; width:900px; height:1600px; background:#0CF;}
#sidebar {width:900px; height:200px; background:#fc0; position: fixed;}
#tabl {width:900x; height:1600px; background:#f00;}
</style>
<script type="text/javascript" src="http://www.glass-pgc.ru/modules/mod_vtem_skitter/styles/jquery-1.7.2.min.js"></script>
<div class="wrap">
<div class="left_block"></div>
<div class="right_block">
<div id="sidebar">фиксированный див</div>
<div id="tabl">див без позиции</div>
</div>
</div>

Возникла задача - чтобы при горизонтальном скролле фиксированный див оставался строго над дивом без позиции (имел горизонтальную прокрутку)
Решил таким методом, все работает как я и хотел, вот пример: http://www.glass-pgc.ru/Untitled-scrollLeft.html
<script type='text/javascript'> 
 var col = $("#sidebar"), def = col.offset().left; 
 $(window).scroll(function () { 
 col.css("left", def - document.documentElement.scrollLeft); 
 }); 
</script>

Но задача усложнилась тем, что сайт выровнен по центру экрана и поэтому возникли проблемы - фиксированный див по прежнему прокручивается по оси Y, но при масштабировании и изменении ширины окна браузера фиксированный и див без позиции разъезжаются в разные стороны, вот пример: http://www.glass-pgc.ru/Untitled-scrollLeft_2.html
пожалуйста, помогите..
Ответить с цитированием