2014-11-04 123 views
1

我有一個移動網站,其中有一個導航菜單,點擊右上角的固定位置按鈕顯示。該菜單也是固定的,以便菜單的頂部從按鈕底部下方10px開始。問題是這個導航菜單可能比正在使用的設備的高度更長,當您嘗試滾動時,它會滾動導航菜單後面的內容,看它是否已修復。有人可以幫我解決這個問題嗎?如何滾動移動覆蓋div

+1

您需要使用JS找到屏幕的高度,菜單的頂部菜單的設置高度爲這些差別,並設置「溢出:滾動;」在菜單上。 – 2014-11-04 14:28:41

+0

謝謝,應該$(window).height()工作? – lisburnite 2014-11-04 14:33:27

+1

是的,對於要查找的元素,菜單與瀏覽器頂部的距離使用'$('。menu')。offset()' – 2014-11-04 16:06:54

回答

2

按我的評論:

您需要使用JS找到屏幕菜單的高度,頂部和菜單的最大高度設置爲這些

的差異對於高度窗口的使用$('window').height()

對於菜單的距離,從瀏覽器的頂部:$('.menu').offset()

函數應該住在播放菜單事件偵聽器:

var maxHeight = $(window).height() - $('.menu').offset(); 
$('.menu').css({ "max-height" :maxHeight}) 

確保overflow:scroll;設置你的menu

1

你需要做的就是把一個div與一類什麼(我選擇了scrollable)具有滾動內容導航菜單裏面,然後設置的CSS該分區是沿着線的東西:

div.scrollable{ 
    overflow : auto; 
    position : relative; 
    } 

這樣,div(以及導航菜單的內部內容)將可滾動,而菜單的整個位置保持不變。