css - Bootstrap 4 Angular 7 响应式 chalice 布局

Question

我正在尝试将 Bootstrap 和 jquery 的 chalice 布局实现到具有相同功能的 Angular 中。我从 this question 获得了初始 Bootstrap 和 jquery 代码.

Here is the working jdFiddle

这是我试图翻译成 typecript 的 jquery 代码(并且已经成功地实现了相同的实现)

$(function() {
    $(".menu-toggle").on("click", function(e) {
        if($(this).hasClass("nav")) {
            $("nav").addClass("open");
        }
        else {
            $("aside").addClass("open");
        }
        e.stopPropagation();
    });

    $("body:not(nav)").on("click", function(e) {
        $("nav, aside").removeClass("open");
    });
});

在尝试实现功能时我遇到了不匹配的情况。

Here is my current implementation on stackblitz

我正在尝试复制看到的功能 here正是进入 Angular 的方式。我遇到的问题是:

1. 我的实现中的滚动条滚动整个页面，而不是只滚动主要的中间内容，因此没有像原始实现中那样的粘性标题和粘性左侧菜单。

基本上我要问的是如何制作this看起来一模一样 this有点强调滚动和粘性元素？

--------更新--------

现在我想要实现的是:

1. 粘性 header
2. 带有自己滚动条的粘性左侧导航。

Answer 1

我终于有了一个响应式的 Holy-Grail 布局，用 Angular Material 和 CSS 制作成 Angular 。

Here is the working code in stackblitz

特点:

1. 带有响应式 sidenav 的响应式布局。
2. 粘性页眉和粘性页脚
3. 粘性左侧导航栏

如果您有任何改进，请务必在这里分享它们，以便我们所有人都能受益。干杯。