位置固定，但仍可滚动

Position fixed but still scrollable?

本文关键字：滚动 位置      更新时间：2023-09-26

是否有可能固定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;
}

我想要这个固定的原因是，所以小汉堡菜单保持静态在屏幕的左上角在任何时候，因为有时我正在建设的网站可能是相当长的，所以我希望观众有一点更容易访问。

谢谢!

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

(演示)

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

如果你不想给它一个最小的高度，一个简单的(但不支持旧浏览器)的选项将是使用css calc()像这样

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

我建议在浏览器不支持calc

之前设置一个回退高度
JavaScript

要实现你真正想要的，你需要javascript。

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

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

如果是这样…

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

(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);
相关文章：