我想制作一个随网站滚动的导航栏
现在,如果我只是想要,我只需添加.navbar-fixed
并将其称为一天
但是,我只想在桌面上使用
在移动设备上,我希望它能保持领先地位。
我有办法吗? 我已经研究了jQuery,但每个人都说我应该使用媒体查询(我同意)。
导航栏的代码非常简单,没有额外的CSS。:
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<a href="#" data-activates="side-nav-150" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
</li>
</ul>
</div>
</nav>
</div>
所以tl; dr:
在桌面上:让它像.navbar-fixed
一样
在电话上:使它没有.navbar-fixed
。
答案 0 :(得分:0)
您可以做的是使用媒体查询更新类.navbar-fixed
的CSS,对于移动设备,您可以删除固定属性,例如,如果您有类似的内容:
对于(仅限桌面)
.navbar-fixed {
position:fixed;
}
添加此
@media all and (max-width:767px) {
.navbar-fixed {
position:relative;
}
}
这个示例的想法是,当你有一个小设备时,你必须删除固定属性。
PS:这只是一个示例,您可能需要添加更多CSS
答案 1 :(得分:0)
你有2个解决方案。
1。使用 CSS 媒体查询。
1.a。 首先使用position:fixed
修复导航栏,然后在
767px
(移动设备)将其更改为position:relative
或
absolute
取决于您的需求。
请参阅下面的代码段或&gt; jsFiddle
.content {
height:200px;
width:100%;
background:red;
}
.navbar {
position:fixed;
width:100%;
top:0;
left:0;
}
@media only screen and (max-width: 767px) {
.navbar {
position:relative;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<a href="#" data-activates="side-nav-150" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
1.b。 您还可以仅为桌面进行媒体查询。
请参阅下面的代码段或&gt; jsFiddle
.content {
height: 200px;
width: 100%;
background: red;
}
@media only screen and (min-width: 767px) {
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<a href="#" data-activates="side-nav-150" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
2。为此使用 jQuery 并在html中添加类navbar-fixed
并在移动设备上将其删除。见下文或&gt; jsFiddle
var wWidth = $(window).width()
if ( wWidth < 767) {
$(".navbar").removeClass("navbar-fixed-top")
}
.content {
height: 200px;
width: 100%;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<a href="#" data-activates="side-nav-150" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
答案 2 :(得分:0)
使用@Mihai T
(我不知道如何在这里标记人们)作为灵感和一些指南发布,我设法得到了一个有效的解决方案:
@media only screen and (max-width: 767px)
{
.navbar-fixed nav
{
position: relative;
}
.navbar-fixed
{
position: relative;
height: 56px;
z-index: 998;
}
}
感谢您的帮助:D