Question

我使用的是Material Design Lite（MDL）组件库（v1.3.0）中的菜单，该菜单的固定位置位于页面的左上角。

如果我打开菜单，然后向下滚动到某个点，则菜单项消失。我不希望这种情况发生，而且我不确定是什么原因造成的。

HTML

<html>
<head>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.min.js"></script>
</head>

<body>
    <main>
        <nav class="menu">
            <button id="menu" class="mdl-button mdl-js-button">MENU</button>      
            <ul class="mdl-menu mdl-js-menu" for="menu">
                <a href="#0"><li class="mdl-menu__item">Item 1</li></a>
                <a href="#0"><li class="mdl-menu__item">Item 2</li></a>
                <a href="#0"><li class="mdl-menu__item">Item 3</li></a>
                <a href="#0"><li class="mdl-menu__item">Item 4</li></a>
            </ul>
        </nav>

        <div class="page" style="height:2000px"></div>
    </main>
</body>
</html>

CSS

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

html, body, top {
  margin: 0;
  padding: 0;
  border: 0;
}

main {
  padding: 3rem;
}
  main div.page {
    background-color: #eee;
    margin: 0;
    padding: 0;
    border: 0;
    margin-left: calc( 6rem + 1.5rem + 1.5rem );
    width: calc( 100% - 6rem - 1.5rem - 1.5rem ); }

nav.menu {
  display: block; }

.mdl-button {
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  height: 1.5rem;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
}

.mdl-menu__container {
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  width: 0;
  overflow: visible;
  visibility: hidden;
  font-size: 0.825rem;
  z-index: -1;
}
  .mdl-menu__container.is-visible {
    z-index: 999;
    visibility: visible; }
    .mdl-menu__container.is-visible .mdl-menu__outline {
      opacity: 1;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
    .mdl-menu__container.is-visible .mdl-menu, .mdl-menu__container.is-visible .mdl-menu__item {
      opacity: 1; }

.mdl-menu__outline {
  display: block;
  position: absolute;
  background: #fff;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  top: -1.5rem;
  left: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  will-change: transform;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1; }

.mdl-menu {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  width: auto;
  min-width: 6rem;
  top: -1.5rem;
  left: 0;
  list-style: none;
  opacity: 0;
  clip: rect(0 0 0 0);
  z-index: -1; }

a .mdl-menu__item {
  display: block;
  margin: 0;
  padding: 0.2rem 0.75rem 0 0.75rem;
  border: 0;
  background-color: transparent;
  text-align: left;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  line-height: 2.3rem;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  a .mdl-menu__item:hover {
    background-color: #eee; }
  a .mdl-menu__item:focus {
    outline: none;
    background-color: #eee; }
  a .mdl-menu__item:active {
    background-color: #e0e0e0; }

据我所知，菜单上的CSS规则都没有被MDL滚动更改，但是我可能是错的。我不确定还要寻找什么。

为什么菜单项在滚动时消失了，如何阻止它们消失？

Material Design Lite菜单项在滚动时消失

0 个答案: