Javascript-форум - Горизонтальный скролл дива с позицией fixed

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Горизонтальный скролл дива с позицией fixed (https://javascript.ru/forum/dom-window/52152-gorizontalnyjj-skroll-diva-s-poziciejj-fixed.html)

Горизонтальный скролл дива с позицией 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
пожалуйста, помогите..

sashgera,
вариант ... http://learn.javascript.ru/play/SQEowb... но возможно есть решение на css без js

рони, спасибо, на тестовой странице все отлично работает, но на сайте возникла проблема с конфликтом библиотек jQuery.
На сайте jquery-1.7.2.min.js отключена (конфликт с одним из модулей), а подключена версия jquery-1.6.2.min.js, но с этой библиотекой ваш js не выполняется..
есть ли возможность выполнить ваш js с подключенной библиотекой 1.6.2.min.js ?
ваш код использовал так:

<style type="text/css">
.left_block {float:left;}
#sidebar {width:564px; height:200px; background:#fc0; position: fixed;}
#tabl {width:564px; height:1600px; background:#f00;}
--></style>
<div class="left_block"></div>
<div id="sidebar">фиксированный див<br /><br /> фиксированный див прокручивается по оси Y...</div>
<div id="tabl">див без позиции</div>

<script type='text/javascript'>
var jQnoC12 = jQuery.noConflict(); // query ноконфликт
 var col = jQnoC12("#sidebar"), lblock = jQnoC12(".left_block");
 jQnoC12(window).on("scroll resize",function () {
  var  def = lblock.offset().left + lblock.width()-jQnoC12(this).scrollLeft();
 col.css("left", def);
 });
</script>

может быть посмотрите?
вот тестовая страница на сайте: http://www.glass-pgc.ru/price/test2.html

Цитата:

Сообщение от sashgera

1.6.2

:cray: ... без коментариев ... on замените на bind

рони, большое спасибо!