顶部垂直覆盖旋转木马需要移动

Question

这跟随上一个问题，好像你点击旋转木马的绿点然后在第2页上移动，你会看到顶部菜单覆盖旋转木马，我希望这不包括在第2页。我需要顶部菜单显示在上面旋转木马没有结束。

这是旋转木马的主要CSS，但请登录该网站：www.dijon-egg.com/Posum /

.deco {
  pointer - events: none;
}

.deco--title {
  position: absolute;
  top: 0 px;
  right: 60 px;
  left: 60 px;
  height: 100 vh;
  background: url(.. / img / deco.svg) no - repeat center top;
  background - size: 100 % ;
}

.slideshow {
  position: relative;
  width: 100 vw;
  margin: 10 vh 0 5e m;
}

.slide {
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column - reverse;
  flex - direction: column - reverse; -
  webkit - align - items: center;
  align - items: center;
  width: 100 vw;
  text - align: center;
}

.js.slide {
  position: absolute;
  z - index: 1000;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer - events: none;
}

.slide.slide--current {
  position: relative;
  visibility: visible;
}

.deco--circle {
  position: absolute;
  top: 0;
  border - radius: 50 % ;
  background: #fff;
}

.deco--circle - left {
  right: calc(100 % -140 px);
}

.deco--circle - right {
  left: calc(100 % -140 px);
}

.deco--circle,
.slide__inner {
  width: 450 px;
  height: 450 px;
}

.slide__item {
  position: relative;
  width: 100 % ;
}

.no - js.slide__item {
  display: none;
}

.slide__inner {
  position: relative;
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column;
  flex - direction: column; -
  webkit - justify - content: center;
  justify - content: center; -
  webkit - align - items: center;
  align - items: center;
  margin: 0 auto;
  padding: 20 px;
  pointer - events: auto;
}

.deco--expander {
  position: absolute;
  top: 50 % ;
  left: 50 % ;
  margin: -225 px 0 0 - 225 px;
  border - radius: 50 % ;
  background: #fff;
}

.slide__title {
  position: relative;
  text - indent: 4 px;
  letter - spacing: 4 px;
  text - transform: uppercase;
  color: #b2b2b4;
}

.slide__title--preview {
  font - size: 1.05e m;
  margin: 2e m 0 0 0;
  padding: 0;
  opacity: 0;
  text - align: center;
}

.slide__title--main {
  font - size: 2.5e m;
  line - height: 1;
  margin: 0 0 0.25e m;
  color:
    #464653;
}

.slide--current .slide__title--preview {
opacity: 1;
}

.slide--open .slide__title--main {
opacity: 1;
}

.slide__price {
font-weight: bold;
display: inline-block;
color: # 464653;
}

.slide__price--large {
  font - size: 1.3e m;
  vertical - align: middle;
}

.slide__img {
  position: relative;
  display: block;
  margin: 0 auto;
}

.slide__img--small {
  max - height: 80 % ;
}

.slide__img--large {
  height: 50 vh;
  max - height: 400 px;
  margin: 0 auto 3e m;
}

.action {
  font - size: 1.5e m;
  line - height: 54 px;
  width: 50 px;
  height: 50 px;
  margin: 0;
  padding: 0;
  text - align: center;
  border: none;
  background: none;
}

.action: focus {
  outline: none;
}

.action--open {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 40 px 40 px 0;
  color: #fff;
  border - radius: 50 % ;
  background: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, background 0.1s, opacity   
transition: transform 0.1s, background 0.1s, opacity 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.action--open:focus,
.action--open:hover {
background: # 464653; -
  webkit - transform: scale3d(1.0865, 1.0865, 1);
  transform: scale3d(1.0865, 1.0865, 1);
}

.slide--open.action--open {
  opacity: 0; -
  webkit - transition - delay: 0 s;
  transition - delay: 0 s; -
  webkit - transform: scale3d(0.3, 0.3, 1);
  transform: scale3d(0.3, 0.3, 1);
}

.action--close {
  position: fixed;
  z - index: 1001;
  top: 10 px;
  right: 15 px;
  color: #6cd84e;
-webkit-transition: -webkit-transform 0.1s, opacity 0.1s, color 0.1s;
transition: transform 0.1s, opacity 0.1s, color 0.1s;
}

.action--close:focus,
.action--close:hover {
color: # 464653;
}

.slide--open~.action--close {
  opacity: 1; -
  webkit - transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); -
  webkit - transition - delay: 0.5 s,
  0.5 s,
  0 s;
  transition - delay: 0.5 s,
  0.5 s,
  0 s;
}

.action--close,
.slide--close~.action--close {
  opacity: 0; -
  webkit - transform: scale3d(0.3, 0.3, 1);
  transform: scale3d(0.3, 0.3, 1); -
  webkit - transition - delay: 0 s;
  transition - delay: 0 s;
}

.js.slide__content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100 vw;
  height: 100 vh;
  pointer - events: none;
  opacity: 0;
}

.js.slide--open.slide__content {
  pointer - events: auto;
  opacity: 1;
}

.slide__content - scroller {
  display: -webkit - flex;
  display: flex; -
  webkit - flex - direction: column;
  flex - direction: column; -
  webkit - justify - content: center;
  justify - content: center; -
  webkit - align - items: center;
  align - items: center;
  padding: 2e m;
  position: relative;
}

.js.slide__content - scroller {
  position: fixed;
  min - height: 100 vh;
  width: 100 vw;
}

.slide__description {
  font - size: 1e m;
  font - weight: bold;
  margin: 0.25e m auto 3e m;
  text - indent: 4 px;
  letter - spacing: 4 px;
  text - transform: uppercase;
  color: #acacb3;
}

.button {
  font - weight: bold;
  margin: 0 1e m;
  padding: 0.5e m 1e m;
  color: #fff;
  border: none;
  border - radius: 2 px;
  background:
    #6cd84e;
}

.button:focus,
.button:hover {
outline: none;
background: # 464653;
}

.navbutton {
  position: absolute;
  z - index: 1;
  top: 50 % ;
  left: 50 % ;
  width: 100 px;
  height: 30 px;
  margin: 0;
  margin: -50 px 0 0 0;
  padding: 0;
  border: none;
  background: none;
}

.navbutton__line {
  -webkit - transition: stroke 0.2 s;
  transition: stroke 0.2 s;
}

.navbutton: focus {
  outline: none;
}

.navbutton: hover.navbutton__line {
  stroke: #464653;
}

.navbutton--next {
-webkit-transform: translate3d(220px,-125px,0);
transform: translate3d(220px,-125px,0);
}



* Helper classes */

.lockscroll {
position: fixed;
overflow-y: scroll;
height: 100vh;
}   

.noscroll {
overflow: hidden;
height: 100vh;
position: fixed;
}

.noscroll .deco--expander {
display: none;
}

.scrollable {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: # fff;
}

.scrollable.slide__content - scroller {
  position: relative;
}

@media screen and(max - width: 50e m) {
    .deco--title {
      right: -50 px;
      left: -50 px;
    }
    .deco--circle,
    .slide__inner {
      width: 260 px;
      height: 260 px;
    }
    .deco--expander {
      margin: -130 px 0 0 - 130 px;
    }
    .deco--circle - left {
        right: calc(100 % -50 px);
      }
      .deco--circle - right {
        left: calc(100 % -50 px);
      }
      .slideshow {
        margin - top: 0;
      }
      .action--open {
        margin: 0 12 px 12 px 0;
      }
      .slide__content - scroller {
        -webkit - justify - content: flex - start;
        justify - content: flex - start;
      }
      .slide__img--large {
        margin: 0 auto 2e m;
      }
      .slide__title--preview,
      .slide__title--main {
        font - size: 0.85e m;
      }
      .slide__description {
        font - size: 0.5e m;
      }
      .navbutton--next {
        -webkit - transform: translate3d(75 px, -90 px, 0) scale3d(0.5, 0.5, 1);
        transform: translate3d(75 px, -90 px, 0) scale3d(0.5, 0.5, 1);

      }