相关疑难解决方法(0)

在我的Angular 2应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到页面顶部.结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.

我可以在组件的ngInit中将窗口滚动到页面顶部但是,有没有更好的解决方案可以自动处理我的应用程序中的所有路径？

我有一种情况,在正常的CSS情况下,固定的div将准确定位在指定的位置(top:0px,left:0px).

如果我有一个具有translate3d变换的父级,这似乎不受尊重.我没有看到什么？我尝试过其他webkit-transform,如样式和变换原点选项,但没有运气.

我已经附加了一个JSFiddle,其中一个示例我希望黄色框位于页面的顶角而不是容器元素的内部.

您可以在下面找到小提琴的简化版本:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.

我有一个使用的角度2材质的应用程序<md-sidenav-layout>与<md-toolbar>内部.

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

它看起来像这样

我要做的是让工具栏粘在顶部,这样当你向下滚动时它就不会移动.这是为了使其与sidenav及其标题保持一致.但目前它不起作用.

我虽然添加position: fixed; top: 0会做到这一点,但事实并非如此

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

从我读出MDN:位置和该SO张贴有关position: fixed,似乎如果父母使用它不会工作transform.而且我很确定md-sidenav-layout侧面切换时转换的用途是什么.我position: fixed; top: 0在一个简单的静态页面上测试了它,它工作正常.

我可以尝试将工具栏从上下文中取出md-sidenav-layout,但它是处理动画和过渡以使工具栏和sidenav在切换sidenav时保持一致的.

我的CSS-fu并不强大.也许我错过了什么.有没有关于如何解决这个问题的任何机构？只要我获得了预期的效果,欢迎任何解决方法.

这是Plunker.