保持控件始終可見

Question

我想知道是否有人知道如何讓用戶在頁面上下滾動時始終可見圖像/控件。

一個新的Google搜索頁面會顯示一個示例，它會在您輸入時自動解除搜索結果。在右側，有一張地圖從頁面頂部開始爲100px。當您向下滾動時，地圖仍保留在視圖中，但距頁面頂部0px。當您向後滾動時，它將返回到其正常位置，距離頁面頂部100px。

有關如何完成的任何想法？

Answer 1

您在除IE6的所有瀏覽器尋找position: fixed

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

作品。

Answer 2

position:fixed是去這裏的路。如果你想在google頁面上實現所描述的效果，你需要一個小小的javascript來切換元素的CSS樣式，具體取決於滾動位置。

你可以找到該任務在這裏的腳本： http://jsfiddle.net/6bnuU/

需要注意的是依賴於jQuery的。如果你正在尋找一個不需要jQuery的解決方案，你可以很容易地重寫腳本，但是你必須使用瀏覽器開關，因爲IE使用不同的API作爲滾動狀態而不是其他瀏覽器。 還要注意的是IE 6不支持位置：固定的，所以如果你想支持它，你將不得不使用JavaScript來模擬它（這是一件容易的事）

Answer 3

使用CSS position與價值fixed，那麼位置它在頁面上用left,right,top和/或bottom。例如：

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

您提到的確切示例還需要一些JavaScript。