0

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

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

对于第二个区域（在页面加载时隐藏），我使用了更高的 z-index 和 98% 的左侧边距，以便只显示要单击的按钮。

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

除了隐藏区域的高度比第一个高得多之外，所有这些都可以正常工作。我进行了设置，以便当第一个内容区域可见时，正文具有溢出：隐藏，而当第二个内容区域溢出时：可见。

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

在切换类之前和之后，我尝试滚动顶部，但没有成功。

我确实尝试在 jsfiddle 中复制它，但由于它是 100% 的视口，因此很难显示，我很抱歉过于冗长！附上一个简单的截图。

如果有人有任何想法会很棒，谢谢！

在此处输入图像描述

4

1 回答 1

0

在此处查看此页面：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-15T13:17:38.150 回答