位置固定但仍可滚动？答案

【问题标题】：Position fixed but still scrollable?位置固定但仍可滚动？
【发布时间】：2015-06-12 07:20:02
【问题描述】：

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

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

.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;
}

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

谢谢！

【问题讨论】：

stackoverflow.com/questions/3837037/…hm?
那个问题从来没有选定的答案，那么你具体指的是哪个答案？
很多人都写过overflow-y:scroll;，所以我认为它会帮助您解决问题。
是的，使用溢出总是会添加第二个滚动条。我知道我没有在帖子中这么说，但我不想那样说。

标签： javascript css

【解决方案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.
}

我建议在浏览器不支持计算之前设置一个后备高度

JavaScript

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

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

定义检查内容是否大于视口，如果是，则设置 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);

【讨论】：