javascript - 位置固定但仍可滚动？

Question

是否可以有一个 DIV position: fixed，但如果该 DIV 的内容超出屏幕的查看区域，那么您仍然可以滚动窗口？到目前为止，我已经把所有的东西都放在了这...

FIDDLE

此代码位于媒体查询内，当屏幕达到最大宽度和/或最大高度时会触发该媒体查询，但我认为该代码与我的问题无关。这是我认为需要修改才能正常工作的代码:

.expand {
    display: block !important; 
    position: fixed;
    -webkit-backface-visibility: hidden;
    top: 50px;
    left: 0;
    background: rgba(31, 73, 125, 0.8);
    width: 100%;
    z-index: 999;
}

我希望修复此问题的原因是小汉堡菜单始终静态地停留在屏幕的左上角，因为有时我正在构建的网站可能相当冗长，所以我希望观众更容易访问。

谢谢!

Answer 1

是的，你只需要给div一个固定的高度和overflow: auto设置

( Demo )

.expand {
    bottom: 0;
    overflow: auto;
}

如果你不想给它一个最小高度，一个简单的(但是 not supported by old browsers )选项是像这样使用 css calc()

.expand {
    max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav.
}

我建议在浏览器不支持 calc 之前设置一个回退高度

---

JavaScript

要实现您真正想要的，您需要 javascript。在这里。

检查菜单是否打开，如果没有...

• 定义一个检查以查看内容是否大于视口(viewport)，如果是，则设置 bottom: 0px; 和 overflow: auto 并从正文中删除滚动。

如果是...

• 从菜单和打开菜单时添加的正文中删除所有样式。

( Demo )

(function($) {
    var menu = $('.responsive-menu'), open;
    $('.menu-btn').click(function () {
        if(!open) {
            if(menu.height() > $(window).height()) {
                open = true;
                menu.css({'bottom': '0px', 'overflow': 'auto'});
                document.body.style.overflow = 'hidden';
            }
        } else {
            open = false;
            menu.css({'bottom': '', 'overflow': ''});
            document.body.style.overflow = '';
        }
        menu.toggleClass('expand');
    });
})(jQuery);