сложная проблема с позиционированием CSS

У меня есть макет CSS, как на прикрепленной картинке. введите здесь описание изображения
Я хотел бы добиться следующего поведения

  1. Когда видна часть заголовка, позиции (при прокрутке) такие, как на картинке.
  2. Когда заголовок невидим (мы прокручиваем вниз больше, чем длина заголовка), позиции слева, справа и изображения должны быть фиксированными, и единственной прокручиваемой частью должно быть содержимое страницы.

Пока ссылка fiddle

Лиам предложил эту ссылку, но javascript имеет ошибку Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function . Возможно, это связано с mootools (я не использую Это). Возможна ли эта функциональность без mootols?

Не могли бы вы помочь мне со стилем позиционирования этого?

благодарю вас


javascript css onscroll positioning
person xralf    schedule 26.05.2011    source источник
comment
Никто не сможет вам помочь, если вы не опубликуете осмысленный код или, по крайней мере, ссылку скрипача на что-то, что показывает код, делающий то, что вы говорите.   -  person Joel Etherton    schedule 26.05.2011
comment
Вам также нужно добавить свой HTML.   -  person thirtydot    schedule 26.05.2011
comment
@NGLN @Joel Etherton - добавлен код   -  person xralf    schedule 26.05.2011
comment
сделай пожалуйста скрипку с реальными данными   -  person diEcho    schedule 26.05.2011
comment
@diEcho У меня еще нет опыта игры на скрипке. Не могли бы вы начать что-то минимальное для меня и отправить ссылку сюда, и я дополню ее своим кодом?   -  person xralf    schedule 26.05.2011
comment
просто вставьте код на jsfiddle.net и нажмите "Сохранить", после чего будет создан URL-адрес, вам нужно только поделиться этот адрес здесь   -  person diEcho    schedule 26.05.2011
comment
Я не могу просто вставить, это шаблон Drupal, поэтому там много ненужного кода.   -  person xralf    schedule 26.05.2011
comment
Итак, вам нужен простой HTML/CSS, который выглядит и ведет себя как ваше изображение/описание? Фиксированная ли ширина сайта (если да, то насколько широкая?) или изменчивая ширина?   -  person thirtydot    schedule 26.05.2011
comment
Ваше использование термина img для описания области под боковой панелью действительно сбивает с толку. Если это <img/>, как у него есть расширяющиеся ссылки? Если это не <img/>... зачем использовать термин img?   -  person Richard JP Le Guen    schedule 26.05.2011
comment
@Richard JP Le Guen Мне очень жаль. Это была моя опечатка. Я исправлю это.   -  person xralf    schedule 26.05.2011
comment
Что касается вопроса 1, возможно ли иметь <div> вокруг #right и #img и установить этот родительский элемент <div> как position: fixed? Таким образом, вы можете иметь #right и #img не расположенными, а #img будет двигаться вниз, если #right расширится.   -  person Paul Sham    schedule 26.05.2011
comment
@Paul Sham Не могли бы вы добавить это в мою скрипку? Я не понимаю, как вы это думаете, потому что в пункте 1 нет ничего о правой боковой панели.   -  person xralf    schedule 26.05.2011
comment
Точки 1 и 2 независимы? Если да, то мог бы сделать из пункта 1 еще один вопрос.   -  person xralf    schedule 26.05.2011
comment
Насколько я понимаю, вы хотите, чтобы боковые панели прокручивались нормально, пока заголовок не исчезнет с экрана. Затем они должны остановиться и зафиксироваться на месте. Когда заголовок возвращается в поле зрения, они должны отпустить и нормально прокручиваться, пока заголовок находится в поле зрения. Для этого вам обязательно понадобится JavaScript. Ключевым моментом будет создание обработчика события onScroll, который проверяет, отображается ли заголовок на экране. Если это так, он должен установить боковые панели в положение: статическое. Если нет, он должен установить их в положение: фиксированное.   -  person Will Martin    schedule 26.05.2011
comment
@Will Martin Посмотрите здесь и вникните в вопрос.   -  person xralf    schedule 27.05.2011

Ответы (2)


arrow_upward
1
arrow_downward

Протестировал это, работает нормально

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js">
</script>
<script type="text/javascript">
//<![CDATA[
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 221 || self.pageYOffset > 221) {
            $('rightsidebar').style.position = 'fixed';
            $('rightsidebar').style.top = '0';
            $('leftsidebar').style.position = 'fixed';
            $('leftsidebar').style.top = '0';
        } else if (document.documentElement.scrollTop < 221 || self.pageYOffset < 221) {
            $('rightsidebar').style.position = 'absolute';
            $('rightsidebar').style.top = '221px';
            $('leftsidebar').style.position = 'absolute';
            $('leftsidebar').style.top = '221px';
        }
    }
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
body {margin:0;
}
#header {background:blue; height:221px;}
#rightsidebar {
        position:absolute;
        right: 0;
        top: 221px;
        width: 150px;
        color: #FFFFFF;
        background:red;
}

#leftsidebar {
        position:absolute;
        left: 0;
        top: 221px;
        width: 150px;
        color: #FFFFFF;
}
#topleft {background:green;}
#image {background:red;}
#footer {height:100px; background:yellow;}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div id="header">header</div>
<div id="leftsidebar">
<div id="topleft">lkjlk</div>
<div id="image">IMAGE</div>
</div>
<div id="content"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div id="rightsidebar">lkjlk</div>
<div id="footer">Footer</div>
</body>
</html>
person Liam    schedule 26.05.2011
comment
Должен ли он зависеть от API Google? Что, если Google API однажды не заработает? - person xralf; 27.05.2011
comment
Требуется количество кода? ? - person xralf; 27.05.2011
comment
Нет, это не зависит от библиотеки Google, вы можете загрузить библиотеку mootools и разместить ее локально, я только использовал размещенную библиотеку, чтобы показать, как она работает. Вы можете просмотреть библиотеку и удалить избыточный код, я только что опубликовал быстрый пример. - person Liam; 27.05.2011

arrow_upward
1
arrow_downward

http://jsfiddle.net/juSvJ/ это должно помочь.

Если экран не очень маленький, он должен работать в любом случае.

person buhbang    schedule 26.05.2011
comment
Это не делает то, что я написал в пунктах 1 и 2. Может быть, ему нужен javascript, как предложил Лиам. - person xralf; 26.05.2011
comment
Да, в пункте 1 просто нужно что-то вроде javacript, иначе вам придется сделать так, чтобы он перемещался, и изображение будет ПРАВИЛЬНО под текстом. может быть, надев какой-нибудь массивный бюстгальтер, это поможет убрать его подальше, но я не думаю, что это то, что вам нужно. Что касается пункта 2, я не очень понимаю, что вы говорите, это похоже на jsfiddle.net/juSvJ/7 но вы хотите, чтобы боковые панели следовали и оставались такими же фиксированными? - person buhbang; 26.05.2011
comment
Javascript скорее для пункта 2. Я хотел бы сделать пункт 1 с позицией img относительно левой боковой панели (если это возможно). - person xralf; 26.05.2011
comment
установка родственника будет работать как <br>. Можно, но когда текста слишком много, а img продолжает опускаться, придется вручную понизить top:000px; - person buhbang; 26.05.2011
comment
@zzlawizz Возможно ли, чтобы img всегда был на 5 пикселей ниже левой боковой панели? Левая боковая панель меняет свою высоту из-за ссылки свернуть/развернуть - person xralf; 26.05.2011
comment
@zzlawizz Когда я разворачиваю ссылку на левой боковой панели, изображение, которое было на 5 пикселей ниже, внезапно перескакивает примерно на 50 пикселей вправо и на 50 пикселей вверх. - person xralf; 26.05.2011
comment
@zzlawizz Извини, это была моя вина. У меня есть другой HTML-код для главной страницы. Ваше решение для пункта 1 работает. - person xralf; 26.05.2011
comment
@zzlawizz Пожалуйста, вставьте ваше решение здесь - person xralf; 26.05.2011