Javascript.RU

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

Горизонтальный скролл дива с позицией 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
пожалуйста, помогите..
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2014, 21:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

sashgera,
вариант ... http://learn.javascript.ru/play/SQEowb... но возможно есть решение на css без js
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2014, 00:51
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 19.09.2011
Сообщений: 110

рони, спасибо, на тестовой странице все отлично работает, но на сайте возникла проблема с конфликтом библиотек 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, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,060

Сообщение от sashgera
1.6.2
... без коментариев ... on замените на bind
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2014, 01:21
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 19.09.2011
Сообщений: 110

рони, большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 15:55
как сделать эффект explode с позицией fixed sashgera jQuery 14 04.04.2014 16:47
Горизонтальный скролл бар в ФФ Kepa (X)HTML/CSS 3 18.12.2010 21:44
Горизонтальный скролл на Mootools1.1 Virgile Events/DOM/Window 4 10.07.2010 17:42