如何將標題區域粘貼在頁面頂部？

這是我的模板的標題區域部分。我想在頂部粘貼菜單欄和徽標。我嘗試了很多所有4天。但我不能。我使用sticky.js插件。但它不會發生。我的代碼有什麼問題？我無法理解。我在標題部分使用視差。這是爲了這個問題。如何將標題區域粘貼在頁面頂部？

.parallax-window { 
 
    background: transparent; 
 
} 
 

 
.parallax_bg { 
 
    z-index: 2; 
 
    position: relative; 
 
    color: #FFFFFF; 
 
}

<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg"> 
 
    <div class="parallax_bg"> 
 
    <div class="top_area"> 
 
     <div class="header_area"> 
 
     <div class="container"> 
 
      <div class="row" id="navbar-example"> 
 
      <div class="col-md-2"> 
 
       <div class="logo"> 
 
       <a href="#"><img src="img/header_img/logo.png" alt=""></a> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-10"> 
 
       <div class="main_menu"> 
 

 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       </div> 
 

 

 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#slider">Home</a></li> 
 
        <li><a href="#food_about">About</a></li> 
 
        <li><a href="#igredients">Igredients</a></li> 
 
        <li><a href="#food_menu">Menu</a></li> 
 
        <li><a href="#reviews">Reviews</a></li> 
 
        <li><a href="#reservations">Reservations</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="social_links"> 
 
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
 
        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
 
        <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="header_text_area"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
      <div class="col-md-12 text-center"> 
 
       <div class="header_text"> 
 
       <h2>the right ingredients <br /> for the right food</h2> 
 
       <a href="#" class="btn-filled">BOOK A TABLE</a> 
 
       <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-12-03 Kawsar_Ahmed

沒有試圖做到這一點的簡單'css'，甚至'sticky.js'！ – Pedram

儘量不要對導航欄或徽標使用視差，您可以將其用於jumbotron或標題或橫幅。 –

謝謝。您的信息對我來說真的很有幫助 –

嘗試導航欄固定頂在類的頭的。

來源

2017-12-03 06:28:35 Manish

感謝他的工作。只有簡單的代碼。我在這個領域是新手。 –

這是你想要實現的嗎？

.parallax-window { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg"> 
 
    <div class="parallax_bg"> 
 
    <div class="top_area"> 
 
     <div class="header_area"> 
 
     <div class="container"> 
 
      <div class="row" id="navbar-example"> 
 
      <div class="col-md-2"> 
 
       <div class="logo"> 
 
       <a href="#"><img src="img/header_img/logo.png" alt=""></a> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-10"> 
 
       <div class="main_menu"> 
 

 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       </div> 
 

 

 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#slider">Home</a></li> 
 
        <li><a href="#food_about">About</a></li> 
 
        <li><a href="#igredients">Igredients</a></li> 
 
        <li><a href="#food_menu">Menu</a></li> 
 
        <li><a href="#reviews">Reviews</a></li> 
 
        <li><a href="#reservations">Reservations</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="social_links"> 
 
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
 
        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
 
        <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="header_text_area"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
      <div class="col-md-12 text-center"> 
 
       <div class="header_text"> 
 
       <h2>the right ingredients <br /> for the right food</h2> 
 
       <a href="#" class="btn-filled">BOOK A TABLE</a> 
 
       <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-12-03 08:02:09 Gameselop

如何將標題區域粘貼在頁面頂部？

回答

相關問題