Форум

sashgera · #1 (**permalink**) 05.12.2014, 21:29

Здравствуйте
есть фиксированный див, под ним див без позиции:

<!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
пожалуйста, помогите..

рони · #2 (**permalink**) 05.12.2014, 22:09

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

sashgera · #3 (**permalink**) 06.12.2014, 01:51

рони, спасибо, на тестовой странице все отлично работает, но на сайте возникла проблема с конфликтом библиотек 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

рони · #4 (**permalink**) 06.12.2014, 02:02

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

1.6.2

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

sashgera · #5 (**permalink**) 06.12.2014, 02:21

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

Форум

Справочник

Discord чат

Курсы javascript