我正在尝试将 Bootstrap 和 jquery 的 chalice 布局实现到具有相同功能的 Angular 中。我从 this question 获得了初始 Bootstrap 和 jquery 代码.
这是我试图翻译成 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 的方式。我遇到的问题是:
- 我的实现中的滚动条滚动整个页面,而不是只滚动主要的中间内容,因此没有像原始实现中那样的粘性标题和粘性左侧菜单。
基本上我要问的是如何制作this看起来一模一样 this有点强调滚动和粘性元素?
--------更新--------
现在我想要实现的是:
- 粘性 header
- 带有自己滚动条的粘性左侧导航。
最佳答案
我终于有了一个响应式的 Holy-Grail 布局,用 Angular Material 和 CSS 制作成 Angular 。
Here is the working code in stackblitz
特点:
- 带有响应式 sidenav 的响应式布局。
- 粘性页眉和粘性页脚
- 粘性左侧导航栏
如果您有任何改进,请务必在这里分享它们,以便我们所有人都能受益。干杯。
关于css - Bootstrap 4 Angular 7 响应式 chalice 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54395965/