Как создать на странице элемент, который всегда остается видимым, но уступает место другим элементам?

Question

У меня есть HTML-страница с довольно сложным макетом (глянь сюда).Мне нужно поместить на эту страницу изображение, которое посетитель может перетащить куда угодно, чтобы запомнить, где он был.Я реализовал функцию закладок, но теперь мне нужно поместить изображение туда, где она сможет его легко взять.

По сути, я бы хотел, чтобы элемент оставался ниже ToC справа, но не должен прокручиваться из поля зрения.

Думаю, я мог бы использовать JavaScript для перемещения элемента, как только он начнет прокручиваться из поля зрения, но есть ли лучший вариант?Могу ли я сказать «плавать вправо и под div ToC или view.top, в зависимости от того, что больше»?

Или, может быть, мне следует создать фиксированный заголовок (со ссылками и, возможно, ToC)?

Есть еще идеи?

Answer 1

Вероятно, это можно сделать с помощью JQuery, но это всегда будет нервно.Я бы рассмотрел фиксированный DIV.Конечно, вы можете расположить его под меню, чтобы он никогда не был выше (= ближе к верхнему краю) меню и сохранял свое положение.

.thingy { position: fixed; right: 0px; top: 415px; width: 256px }

Для этого под меню больше ничего не должно быть, иначе значок закладки будет перекрывать другие элементы.

Answer 2

Если вы просто хотите, чтобы изображение было фиксированным, но при этом его можно было прокручивать до верхней части окна, вам нужно будет обработать событие прокрутки окна и установить фиксированное положение изображения, когда изображение прокручивается вверх.

Пример этого см. в навигации по сайту на Режим причуд.

Альтернативно, вы можете дать полное содержание position: fixed; right: 0;, задайте ширину оглавления и правое поле тизера, равное ширине оглавления.Таким образом, не будет никаких требований к JavaScript, и вы всегда будете видеть все содержание.