視差効果を使用しているときにテキストとボタンを背景に固定する方法

Question

現在、上部セクションの背景が固定されていて、その下のセクションが背景の上にスクロールしています。問題は、私がスクロールすると、上部のセクションの背景にあるテキストがスクロールしますが、まだブートストラップに反応している間にバックグラウンドに固定したいと思っています。ここに私のコードは次のとおりです。

.topInfo { 
 
    background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url('/CMS_Static/Uploads/313864614C6F6F/exuma rocks 2.jpg'); 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    height: 100%; 
 
} 
 

 
.topInfoText { 
 
    color: white; 
 
    padding-top: 275px; 
 
    font-size: 3.3em; 
 
} 
 

 
.bannerBtn { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #ffffff; 
 
    border-radius: 50px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    margin-top: 130px; 
 
    font-size: 1.45em; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    transition: all 0.3s ease-in-out 0s; 
 
}

<section class="topInfo"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <h1 class="topInfoText text-center">Aerial Drone Services and Stock Footage</h1> 
 
     </div> 
 
     <div class="col-sm-4 col-sm-offset-4"> 
 
     <a class="btn bannerBtn btn-block" href="#">Learn More</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

は

がボタンbannerBtnに見出しtopInfoTextとmargin-top: 100vhにposition: fixed;を追加し、これを試してみてください。

body { 
 
    background: #333; 
 
} 
 

 
.topInfo { 
 
    background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url('image here'); 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.topInfoText { 
 
    color: white; 
 
    padding-top: 275px; 
 
    font-size: 3.3em; 
 
    position: fixed; /* Change */ 
 
} 
 

 
.bannerBtn { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #ffffff; 
 
    border-radius: 50px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    margin-top: 130px; 
 
    font-size: 1.45em; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    transition: all 0.3s ease-in-out 0s; 
 
    margin-top: 100vh; /* Change */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="topInfo"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <h1 class="topInfoText text-center">Aerial Drone Services and Stock Footage</h1> 
 
     </div> 
 
     <div class="col-sm-4 col-sm-offset-4"> 
 
     <a class="btn bannerBtn btn-block" href="#">Learn More</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

jsfiddle here