-2
私は特定のページでページ上部に固定バーを配置したいウェブサイトに取り組んでいます。モバイルでは、これは機能しますが、指が画面から離されると、バーは画面から離れるように移動します。位置：モバイルスクロールの固定移動
私はposition：fixed; top：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>
に基づいて行われます。だから私たちはあなたのウェブサイトに行き、それを検査し、どこに見えるべきかを理解する必要はありません。 – LuudJacobs
問題は、もともと私はそれが働いたcodepenでこれを書いたが、実装した後はもう機能しなかった。 – Marcel
あなたはtransform3dを持っていて、Yはいくらかの負の値に設定されています – Huangism