具有兩個內容區域的水平網站

我正在創建一個網站，其中有兩個不同的區域。這個想法是，我點擊一個按鈕，第二個內容區域滑入第一個。具有兩個內容區域的水平網站

這兩個區域設置爲100％寬度，並且絕對定位以佔據整個窗口寬度。

對於第二個區域（頁面加載時隱藏），我使用更高的Z-index和98％的左邊距，以便只顯示點擊按鈕。

在jQuery上單擊該按鈕時，一個類被切換，由此邊距左移從98％移動到0，所以現在隱藏區域被顯示。

所有的工作都很好，除了隱藏區域的高度比第一個更高。我已經設置好了，以便當第一個內容區域可見時，主體有溢出：隱藏，當第二個，溢出：可見。

問題是，如果我向下滾動第二個區域，然後單擊滑回第一個區域，第一個區域將發生溢出：隱藏但不顯示頂部。

我試過沒有成功scrollTop之前和之後類是切換。

我的確嘗試在jsfiddle中複製它，但因爲它是100％的視口，所以很難顯示，我很抱歉過於冗長！附件是一個簡單的截圖。

如果有人有任何想法，將是偉大的，謝謝！

enter image description here

來源

2013-04-15 onjegolders

看看這個頁面在這裏：cargocollective.com/nonfeed

好像你需要的是滾動右邊的div而不實際滾動整個頁面。在這個設計實例中，有三個div的每個垂直滾動節如下所示：

div.entry { 
    overflow: hidden; 
} 
div.entry div.wrapper { 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
div.entry div.wrapper div.content { 
    overflow: hidden; 
}

對於你的情況，你可能想只是包裝右邊的div在另一個DIV與overflow: hidden，然後有一個jQuery函數將div的高度設置爲頁面的高度。

下面是一些jQuery的代碼，設置窗口高度：

var height_change_callback = function() { 
var bodyheight = jQuery(window).height(); 
jQuery(".wrapper").each(function() { 
     jQuery(this).css("height", bodyheight-80); 
    }); 
} 
jQuery(document).ready(height_change_callback); 
// for the window resize 
jQuery(window).resize(height_change_callback);

希望有所幫助。

來源

2013-04-15 13:17:38 acsmith

在尋找另外幾秒鐘時，您可能只能在右側div上進行高度更改回調，而不會添加任何額外的包裝div。該cargcollective示例也設置爲隱藏所有滾動條，所以我認爲這是div.entry的目的。 – acsmith

非常感謝@acsmith，我認爲你是對的，只要讓我的第二頁內容（這是一個網格塊圖庫）設置爲滾動而不改變高度就行了（我認爲事後看來它是更優雅的解決方案）。偉大的聯繫，他們做了很有趣的事情。 – onjegolders

沒問題。很高興它有幫助！ – acsmith

具有兩個內容區域的水平網站

回答

相關問題