水平滾動一個固定的頁眉/頁腳

Question

我有被設定爲960像素的最小寬度，並且被固定到頁面頂部的頭部。當用戶縮小窗口的尺寸小於960像素時，將顯示水平滾動條，因爲它應該。但是，當用戶滾動水平，因爲一些頭被切斷，我希望能夠以同樣的速度在頁面滾動頭......我非常希望我的頭垂直固定，而不是水平。

我看着下面，但是沒有幫助：

CSS: fixed position on x-axis but not y?

Centering a fixed element, but scroll it horizontally

Answer 1

我知道這是一個過時的問題，如果你想通了但我不知道，但希望在其他人遇到同樣問題的情況下提交答案。

當設置具有最小寬度的內容fixed在CSS，它相對於兩軸的窗口鎖定。當窗口被調整大小以小於最小寬度，則多餘的頁眉/頁腳被削波並且不能被滾動到。不幸的是，沒有辦法單獨在CSS中改變這種行爲。然而，有一個簡單的jQuery修復您的問題（假設你已經在頁面上的其他內容，將創建水平滾動條）：

$(window).scroll(function() 
    { 
     $("header,footer").css('margin-left', -($(window).scrollLeft()) + "px"); 
    }); 

這將導致頁眉和頁腳（如適用）移動在x軸上與滾動方向相反，從而達到您想要的效果。