按下按钮使 $("body").css("height":"100%")

Question

我想在我的网站中使用此功能（按下 'SHOW IT' 时）--> http://labs.voronianski.com/jquery.avgrund.js/

问题是此功能需要将 body 高度设置为 100%。有时，在我的站点中，我需要检测滚动用户以使顶部栏在某些位置出现和消失。

所以为了可以加入这两个功能，我只在按下按钮以显示 div avground 时将主体高度更改为 100%。但是我遇到了一个问题：按钮在页脚上，当我更改 body 高度时，它们会自动将我发送到页面顶部，然后显示 de div avground.

有什么方法可以避免这种情况发生，或者可以在 div avground 出现之前滚动到页脚？

如果有人有其他解决方案，我将不胜感激。

谢谢

Answer 1

您实际上不必这样做，对于该动画，您可以使用简单的 CSS3:

CSS:

#layer-body {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}
#layer-body.hide {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}
#menu {
    background: rgba(208, 31, 60, .95);
    position: fixed; top: 0; left: 0; z-index: 4;
    width: 100%; height: 100%;
}
#menu.show {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}
#menu.hide {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}

HTML:

<body>
    <div id="layer-body"></div>
    <div id="menu"></div>
</body>

这意味着，您的所有网站都将在#layer-body 内，而菜单将在#menu 内。

因此，当您打开菜单时，您必须将 class HIDE 添加到 #layer-body 并将 SHOW 添加到 #menu。

Answer 2

您是否尝试过使用 bootstrap 的模态框？它们制作起来非常简单，而且在我看来更好看。

http://getbootstrap.com/javascript/

按下按钮使 $("body").css("height":"100%")

press button to make $("body").css("height":"100%")

html

javascript

css

jquery

web