如何将标题区域粘贴在页面顶部？

问题描述：

这是我的模板的标题区域部分。我想在顶部粘贴菜单栏和徽标。我尝试了很多所有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>

没有试图做到这一点的简单'css'，甚至'sticky.js'！ – Pedram

尽量不要对导航栏或徽标使用视差，您可以将其用于jumbotron或标题或横幅。 –

谢谢。您的信息对我来说真的很有帮助 –

答

尝试导航栏固定顶在类的头的。

感谢他的工作。只有简单的代码。我在这个领域是新手。 –

答

这是你想要实现的吗？

.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>

如何将标题区域粘贴在页面顶部？

相关推荐