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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

В качестве примера этого см. Навигацию по сайту на QuirksMode .

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