具有两个内容区域的水平网站

Question

我正在创建一个网站，其中有两个不同的区域。我的想法是，我点击一个按钮，第二个内容区滑入第一个内容区的顶部。

这两个区域都设置为100%宽度，并且绝对定位为占据整个窗口宽度。

对于第二个区域(在页面加载时隐藏)，我使用了更高的z索引和98%的左边缘，以便只显示要单击的按钮。

在jQuery中，单击该按钮就会切换一个类，从而将左边距从98%移动到0，因此现在显示的是隐藏区域。

除了隐藏区域的高度比第一个区域高得多之外，所有这些都工作得很好。我对其进行了设置，以便当第一个内容区域可见时，主体具有overflow:隐藏，而当第二个内容区域可见时，则具有overflow:visible。

问题是，如果我向下滚动到第二个区域，然后单击以滑回到第一个区域，第一个区域将溢出:隐藏但不从顶部显示。

在切换类之前和之后，我都尝试过scrollTop，但都没有成功。

我确实尝试过用jsfiddle复制它，但由于它是100%的视窗，所以很难显示，很抱歉我太冗长了！附件是一个简单的截图。

如果有人有任何想法，那就太好了，谢谢！

​

​

Answer 1

请在此处查看此页面：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;
}

对于您的情况，您可能只想使用overflow: hidden将右div包装在另一个div中，然后使用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);

希望这能有所帮助。