Question

我正在一个网站上工作，在某些网页上，我希望在页面顶部有一个固定栏。在移动设备上，这可以起作用，但当手指从屏幕上释放时，条形移动远离屏幕。

我一直在使用position：fixed;，top：0;并显示：block;

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

[编辑;在此

/* 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家长

position：固定在移动滚动上移动

1 个答案: