仅在桌面上滚动导航栏(导航栏固定)

时间:2017-09-18 09:37:14

标签: css materialize

我想制作一个随网站滚动的导航栏 现在,如果我只是想要,我只需添加.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

3 个答案:

答案 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