Question

当我使用position:sticky进行滚动时，我有一个导航栏遍及我的页面并跟随视口。唯一值得发布的课程（我相信）是.secondary-heading，但我不想统治排除其他scs影响我的问题的可能性。

.secondary-heading {
  // This is the class in question....
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  // The remainder might not be necessary... 
  .tab-bar {
    height: 70px;
    background-color: $white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    &:not(.with-title) {
      box-shadow: 0px 5px 5px -5px $medium-gray;
    }
    img {
      margin-right: 20px;
    }
    >div {
      a {
        @include font-size(20);
        padding: 0 15px;
        color: $dark-gray;
        position: relative;
        top: -4px;
        padding-bottom: 19px;
        padding-top: 25px;
        &:hover {
          color: $sea-blue;
          cursor: pointer;
        }
        &.active {
          background-color: $standard-gray;              
          color: white;
          &:hover {
            color: white;
            cursor: initial;
          }
        }
      }
    }
  }
  .title-bar {
    height: 70px;
    background-color: $standard-gray;        
    color: white;
    @include font-size(30);
    box-shadow: 0px 5px 5px -5px $medium-gray;
    display: flex;
    align-items: center;
    span {
      margin-left: 240px;
    }
  }
}

在Chrome和Firefox上，此样式可完美运行并按页面预期进行滚动，但是在Edge中，滚动条会闪烁。有没有一种样式设置方式，以使栏不会闪烁？

这是我的NavBar的HTML：

<div class="secondary-heading">
  <div class="tab-bar" [class.with-title]="showTitleBar">
    <div>
      <a routerLink="#" i18n>Home</a>
      <a routerLink="#" i18n>Link</a>
      <a routerLink="#" i18n>Link</a>
    </div>        
  </div>
  <div class="title-bar">
    <span>{{ headerTitle }}</span>
  </div>
</div>

我正在使用版本控制：

Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134

Answer 1

我的解决方案是在IE和Edge中使用position: fixed。不理想，但是我能够得到想要的结果。仍在等待微软追赶...

位置：在Microsoft Edge中滚动时出现粘滞闪烁，但在其他浏览器中则没有

1 个答案: