位置:移动滚动上的固定移动

Question

我正在一个网站上工作，在某些页面上，我希望在页面顶部有一个固定的栏。在移动设备上，此功能，但是当手指从屏幕上松开时，栏会远离屏幕。

我一直在使用位置：固定;，顶部：0; 和显示：块;

有什么办法可以解决这个问题吗？在过去的几天里，我一直在围绕它绞尽脑汁，但似乎无法让它工作。

[编辑;在此

/* Basic CSS */
#offcanvas-menu {
  z-index: 99999;
}
.banner {
  position: fixed;
  padding: 0;
  overflow: hidden;
  z-index: auto;
  border-bottom-width: 0.13vw;
  border-color: #000000;
  border-bottom-style: solid;
}
.banner_inner {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 0;
  margin-top: 0.3%;
  cursor: pointer;
}
.banner {
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: white;
  translateY(100%);
  transform-origin: left bottom;
  z-index: 102;
  cursor: pointer;
}
/* main text in bar */
#banner-inner {
  margin-left: 1.5%;
  margin-top: 1.5%;
  min-height: 144px;
  position: relative;
}
#banner-row-1 {
  width: 15vw;
  margin-right: 1.5%;
  display: inline-block;
  position: absolute;
}
#banner-row-2 {
  width: 15vw;
  margin-right: 1.5%;
  position: absolute;
  display: inline-block;
  left: 17.7vw;
}
#banner-row-3 {
  width: 46.02vw;
  margin-right: 1.5%;
  position: absolute;
  display: inline-block;
  left: 34.18740849194729vw;
}
#banner-row-3 p6 {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  color: black;
  font-size: 1.39vw;
  line-height: 1.2;
}
a4 {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  color: black;
  font-size: 1.39vw;
  line-height: 1.2;
}
a5 {
  font-family: helvetica, sans-serif;
  font-weight: 300;
  color: black;
  font-size: 1.39vw;
  line-height: 1.2;
  margin-left: 5%;
}
#banner h4 {
  font-family: helvetica, sans-serif;
  color: #000000;
  font-size: 3.2vw;
  letter-spacing: 0em;
  line-height: 1.2;
  font-weight: 300;
  text-align: left;
  display: inline-block;
  margin-left: 1.5%;
  margin-top: 1.2vw;
  margin-bottom: 1.2vw;
  width: 31.5vw;
}
#banner h5 {
  font-family: helvetica, sans-serif;
  color: #000000;
  font-size: 3.2vw;
  letter-spacing: 0em;
  line-height: 1.2;
  font-weight: 300;
  text-align: left;
  display: inline-block;
  left: 34.18740849194729vw;
  margin-top: 1.2vw;
  margin-bottom: 1.2vw;
  margin-left: 1.5%;
  width: 46.02vw;
}
#banner h6 {
  font-family: helvetica, sans-serif;
  color: #000000;
  font-size: 3.2vw;
  letter-spacing: 0em;
  line-height: 1.2;
  font-weight: 300;
  text-align: left;
  display: inline-block;
  left: 34.18740849194729vw;
  margin-top: 1.2vw;
  margin-bottom: 1.2vw;
  margin-left: 1.5%;
  width: 15.1vw;
}
/* left */
nav#offcanvas-menu {
  /* Full screen nav menu */
  width: 100vw;
  height: 29.5vw;
  /* this is for browsers that don't support CSS3 translate3d */
  -moz-transform: translate3d(0, -23.3vw, 0);
  -webkit-transform: translate3d(0, -23.3vw, 0);
  transform: translate3d(0, -23.3vw, 0);
}
nav#offcanvas-menu {
  left: 0vw;
}
/* off canvas sidebar left right */
div#main-region {
  position: relative;
  width: 100%;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 0.5s;
  /* transition settings */
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
/*SIDEBAR LEFT*/
input[type="checkbox"]#togglebox {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}
nav#offcanvas-menu label#closex {
  /* Large x close button inside nav */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
  text-indent: -10000px;
  line-height: 1.1;
  z-index: 10;
  top: 0;
  right: 0;
}
input[type="checkbox"]#togglebox:checked~nav#offcanvas-menu {
  /* nav state when corresponding checkbox is checked */
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
nav#offcanvas-menu {
  top: 0;
  z-index: 104;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: white;
  display: block;
  position: fixed;
  color: white;
  overflow: auto;
  -moz-transition: -moz-transform 0.5s, visibility 0s 0.5s;
  /* transition settings */
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  transition: transform 0.5s, visibility 0s 0.5s;
}

<label for="togglebox">
</label>
<input type="checkbox" id="togglebox" />
<nav id="offcanvas-menu">
  <label for="togglebox" id="closex">×</label>
  <label for="togglebox">
  <div id="banner-inner">
    <div id="banner-row-1">
      <a4>Client</a4><br>
      <a5>Client name</a5><br><br>
      <a4>Year</a4><br>
      <a5>2016</a5><br><br>
      <a4>Collaboration</a4><br>
      <a5>Name Person</a5>
    </div>
    <div id="banner-row-2">
      <a4>Specifications</a4><br>
      <a5>specifications</a5>  
    </div>
    <div id="banner-row-3">
      <p6>piece of text<p6><br><br>
      <p6>piece of text</p6>  
    </div>
  </div>
  <div class="banner" id="banner">
    <h4>Titel project</h4>
    <h5>Identity, Typography, Web</h5>
    <h6>↓ Info</h6>
  </div>
  </label>
</nav>
<br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br>

Answer 1

您需要

从其中一个父项中删除translate3d(div#main-region(，否则您的固定位置将基于该 translate3d 父项