Bootstrap 4 Angular 7 响应式圣杯布局

Question

我正在尝试实现从 bootstrap 和 jquery 到具有相同功能的 Angular 的圣杯布局。我从this question 获得了初始引导程序和 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. 粘性标题
2. 带有自己滚动条的粘性左侧导航。

Answer 1

我终于有了一个响应式的圣杯布局，用有角度的材料和 css 制作。

Here is the working code in stackblitz

特点：

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

如果您有任何改进，请务必在此处分享，以便我们所有人受益。干杯。