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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

回答：

这是你想要实现的吗？

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

以上是 如何将标题区域粘贴在页面顶部？ 的全部内容， 来源链接： utcz.com/qa/259721.html

回到顶部