作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我模板的页眉区域部分。我想在顶部粘贴菜单栏和 Logo 。我在最多 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>
最佳答案
在标题类中尝试 navbar-fixed-top 。
关于javascript - 如何将页眉区域粘贴在页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47615792/
我是一名优秀的程序员,十分优秀!