絕對定位H1標題上滾動向下向下移動

我有一個H1標題：絕對定位H1標題上滾動向下向下移動

<h1 class="main-heading"><span class="heading-opaque-background"><%= @post.title %></span></h1>

絕對定位在標題畫面：

.main-heading { 
    /*TEXT ON MAIN PIC*/ 
     position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2; 
    padding: 0; 
    margin: auto; 
    /*height: 40px;*/ 
    color: rgba(255, 255, 255, 0.80); 
    font-family: 'Open Sans'; 
    font-weight: 300; 
    font-size: 4vw; 
     height: 20%; 
    width: auto; 
    padding: 20px; 
    letter-spacing: 8px; 
    font-variant: small-caps; 
    text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 
    0 3px 0 #777777, 0 4px 0 #666666, 
    0 5px 0 #555555, 0 6px 0 #444444, 
    0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 
    0 9px 10px rgba(0, 0, 0, 0.2); 

}

當我向下滾動，報頭朝向上下移動圖片的底部。將顯示設置爲內聯不會改變任何內容。

我怎樣才能使標題保持絕對定位在畫面？

下面是HTML的一個更完整的概述，以示父類：

<img class="project-main-pic" src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}) %>" /> 
<!--f https://image.slidesharecdn.com/otpphoenixecto-170327125511/95/yurii-bodarev-otp-phoenix-ecto-three-pillars-of-elixir-58-638.jpg?cb=1490619720--> 
<section id="home" class=""> 
    <h1 class="main-heading"><span class="heading-opaque-background"><%= @post.title %></span></h1> 
</section> 
<div class="project-wrapper"> 
    <section id="about" class="sec-about"> 
     <div class="container"> 
      <h1 class="project-title"><%= @post.title %></h1> 
      <!-- ADD TO FORM AND DATABASE --> 
      <div class="row"> 
       <div class="col-sm-6 col-sm-offset-3"> 
        <p class="summary-text"> 
         <%= @post.body %> 
        </p> 
       </div> 
      </div> 
     </div> 
    </section>

來源

2017-09-05 RubyRube

提供一個的jsfiddle什麼的，也是爲什麼使用高度：20％？ – Sletheren

請提供適用於問題元素（'h1'）的樣式。 – UncaughtTypeError

@UncaughtTypeError，我沒有針對h1的特定佈局樣式。主標題是唯一處理此元素的類。除非我錯過了什麼。 – RubyRube

-1

這種用途

.main-heading{position: fixed; top: 0; left: 0; right: 0;}

或使用特殊的插件對於這一點，他再是 sample

來源

2017-09-05 11:29:00

。我需要標題留在原地。位置：固定會在我滾動時移動。現在，它在scrolldown上移動絕對位置似乎沒有足夠的位置。 – RubyRube

@RubyRube我需要看到完整的代碼，嘗試使用粘包插件，用於修復塊scrol –

@RubyRube https://jsfiddle.net/1scv73cb/檢查這個 –

在此處檢查：https://jsbin.com/cezidexase/1/edit?html,css,output

.main-heading { 
    margin: auto; 
    /*height: 40px;*/ 
    color: rgba(255, 255, 255, 0.80); 
    font-family: 'Open Sans'; 
    font-weight: 300; 
    font-size: 4vw; 
     height: 20%; 
    width: auto; 
    padding: 20px; 
    letter-spacing: 8px; 
    font-variant: small-caps; 
    text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 
    0 3px 0 #777777, 0 4px 0 #666666, 
    0 5px 0 #555555, 0 6px 0 #444444, 
    0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 
    0 9px 10px rgba(0, 0, 0, 0.2); 

}

來源

2017-09-05 12:06:40 user1594

這是工作的罰款孤立，但我不知道它如何與隱藏的班我的CSS，這我試着去追查工作。 – RubyRube

共享Plunker將有所幫助 – user1594

@RubyRube如果您檢查元素並保持IDE打開，並選擇相關元素（以便所有可用的樣式可見），然後滾動，您應該能夠選取所應用的任何其他樣式或未設置。 – UncaughtTypeError

絕對定位H1標題上滾動向下向下移動

回答

相關問題