jquery - 调整大小后 100% 高度 div 向上滚动

Question

我有一个由三个部分组成的单页网站。它们每个都有 100% 的宽度和高度。当我在窗口位于第一部分或最后一部分时调整窗口大小时，一切都调整得很好，但是当我在第二部分时，它就会变得疯狂(不是真的疯狂......调整窗口大小后，第一部分也会变短，所以第二部分被拖上来，露出第三部分的一部分)。

事情是，当我位于第二部分并调整窗口大小时，我希望整个部分“固定”在窗口内，这样我就不会看到第一部分和第三部分的片段。当我试图描述它时，这变得更加复杂，所以这里是简单的 fiddle :http://jsfiddle.net/4tVMk/ .我说的是 B 部分 (div#two) 的行为。为了证明它有意义，我只能补充说网站上的滚动已关闭，我只是想让它看起来有点像……幻灯片？所以每次调整大小都会破坏视觉上的一切。

HTML:

<div id="one"><a href="#two">A</a></div>
<div id="two"><a href="#three">B</a></div>
<div id="three"><a href="#one">C</a></div>

CSS:

#one {
    width:100%;
    height:100%;
    background-color:red;
}
#two {
    width:100%;
    height:100%;
    background-color:green;
}
#three {
    width:100%;
    height:100%;
    background-color:blue;
    font-weight:800;
}
a {
    color:white;
}

我已经尝试过更改最后一个 div 大小的 hax，但是我根本看不到第三个 div。放弃这个想法后，我还尝试在每次调整高度时简单地重新加载整个页面，但效果不佳，因为如果不使用当前位置，我无法实现完整页面的重新加载。

感谢您的帮助。

E: 实际上，我从字面上理解了“固定”的意思，并使用 jQuery 来防止该区域在某些情况下上升或下降。它现在可以，但如果有人至少知道我可以在哪里寻求一些提示以使其更加自动化，我将非常感激。

Answer 1

我想在我最近参与的元素中完成类似的事情。在该元素的案例中，我们希望屏幕顶部有几个选项卡按钮，单击它们会切换当前页面正文。

您的情况似乎略有不同，但鉴于您正在禁用滚动并希望当前 div 占据屏幕的 100% 宽度和高度，听起来您一次只希望显示 1 个 div，因此代码我用过应该适合你。我修改了您的代码以显示:

HTML:

<div class="fill-screen" id="one"><a href="#two">A</a></div>
<div class="fill-screen" id="two"><a href="#three">B</a></div>
<div class="fill-screen" id="three"><a href="#one">C</a></div>

CSS:

div.fill-screen {
    width: 100%;
    height: 100%;
    display: none;
}

div.fill-screen:target {
    display: block !important;
}

#one {
    background-color: red;
}

#two {
    background-color: green;
}

#three {
    background-color: blue;
    font-weight: 800;    
}

a {
    color: white; 
}

JS:

$(window).on('hashchange', function() {
    if (document.location.hash === "" || document.location.hash === "#") {
        document.location.hash = "#one";
    }
});

$(window).trigger('hashchange');

不幸的是，它确实需要 JS，但它非常轻量级，而且肯定比使用 jQuery 来防止区域上升或下降要好。上面的例子使用了 jQuery，但是用纯 JS 来完成是微不足道的——我只是碰巧在元素中使用了 jQuery。

为了完整说明，此解决方案在三个 div 上使用 CSS :target 选择器。基本上这意味着当 div 被“定位”时，即 URL 中的当前散列引用其 id，给定的 CSS 将被添加到该特定的 div。您的三个 div 默认设置为 display: none;，因此是不可见的，但是当它们中的任何一个在 URL 哈希中被定位时，显示属性将被覆盖，即 display: block !important ;。这会导致目标 div 出现并填充页面，但其他两个保持隐藏状态，因为它们的 CSS 不受影响。

在没有给出的情况下，需要 JS 设置 URL 哈希，例如当您的用户第一次导航到您的页面时，三个 div 都没有被定位。它绑定(bind)到 hashchange 事件，然后在页面加载时强制触发该事件。这意味着无论何时用户在没有散列的情况下导航到页面，或者在页面加载后尝试删除散列，他们将被引导回默认散列 - 在本例中为“#one”。因此，导航到“/page.html”或“/page.html#”会立即将 URL 更改为“/page.html#one”并触发 display: block !important; 规则id 为“one”的 div。

如果您不希望任何 div 以页面加载为目标，则可能不需要 JS，或者相反，对于其他限制，您可以更改 if 条件以强制哈希为“#one” , "#two"或 "#three"与数组成员资格测试。我会把它留给你。

如果上面的内容不是很清楚，这里有一个 JSFiddle:http://jsfiddle.net/Tedworthy/M33Ct/