Держать управление всегда видимым

Question

Мне было интересно, если кто-нибудь знает, как держать изображение/управление всегда видимым, когда пользователь прокручивает вверх и вниз по странице.

Приведенный пример находится на новой странице поиска Google, которая автоматически перехватывает ваши результаты при вводе. С правой стороны находится карта, которая начинается черновой на 100 пикселей вверху страницы. Когда вы прокручиваете вниз, карта остается в поле зрения, но находится 0px сверху. Когда вы прокручиваете резервную копию, она возвращается в нормальное положение, 100 пикселей вверху страницы.

Любые идеи о том, как это делается?

Answer 1

Вы ищете position: fixed

<div style="position: fixed; right: 100px; top: 100px; width: 200px; height: 100px; background-color: red"> 
I'm fixed</div> 

работает во всех браузерах, кроме IE6.

Answer 2

position:fixed - путь сюда. Если вы хотите добиться описанного эффекта, как на странице google, вам понадобится небольшой javascript, который переключает стили css элемента в зависимости от положения прокрутки.

Вы можете найти сценарий для выполнения этой задачи здесь: http://jsfiddle.net/6bnuU/

Обратите внимание, что зависит от JQuery. Если вы ищете решение, которое не требует jquery, вы можете легко переписать сценарий, но вам придется использовать переключатель браузера, потому что IE использует другой API для состояния прокрутки, чем другие браузеры. Также обратите внимание, что IE 6 не поддерживает позицию: фиксированный, так что если вы хотите, чтобы поддержать его, вам придется эмулировать с JavaScript (который является легкой задачей)

Answer 3

position Используйте CSS со значением fixed, то положение он находится на странице с left, right, top и/или bottom. Например:

#some_element { 
    position: fixed; 
    top: 100px; 
    right: 0; 
} 

Точный пример, который вы упомянули, также требует некоторого JavaScript.