Keep control always visible

I was wondering if anybody knows how to keep a image/control always visible when the user scrolls up and down the page.

An example is on the new Google search page that automatically perdicts your results when you type in. On the right-hand side there is a map that starts roughtly 100px from the top of the page. When you scroll down the map remains in view but is 0px from top of page. When you scroll back up, it returns to its normal position, 100px from the top of the page.

Any ideas on how this is done?

---

You are looking for position: fixed

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

Works in all browsers except IE6.

---

position:fixed is the way to go here. If you want to achieve the described effect like on the google page, you'll need a little javascript that toggles the element's css-styles depending on the scroll position.

You can find a script for that task here: http://jsfiddle.net/6bnuU/

Note that depends on jquery. If you're looking for a solution that does not require jquery, you can easily rewrite the script, but you'll have to use a browser switch because IE uses a different API for the scrolling state than the other browsers. Also note that IE 6 does not support position:fixed, so if you want to support it you'll have to emulate it with javascript (which is an easy task)

---

Use CSS position with the value fixed , then position it on the page with left , right , top and/or bottom . For example:

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

The exact example you mention also requires some JavaScript.

链接地址: http://www.djcxy.com/p/83838.html

上一篇: 在屏幕中间的中心div

下一篇: 保持控制始终可见