Question

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

Answer 1

您可以做的是使用媒体查询更新类.navbar-fixed的CSS，对于移动设备，您可以删除固定属性，例如，如果您有类似的内容：对于（仅限桌面）

.navbar-fixed {
    position:fixed;
}

添加此

@media all and (max-width:767px) {
.navbar-fixed {
     position:relative;
   }
}

这个示例的想法是，当你有一个小设备时，你必须删除固定属性。

PS：这只是一个示例，您可能需要添加更多CSS

Answer 2

你有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>

Answer 3

使用@Mihai T（我不知道如何在这里标记人们）作为灵感和一些指南发布，我设法得到了一个有效的解决方案：

@media only screen and (max-width: 767px)
{
    .navbar-fixed nav
    {
        position: relative;
    }
    .navbar-fixed
    {
        position: relative;
        height: 56px;
        z-index: 998;
    }
}

感谢您的帮助：D

仅在桌面上滚动导航栏（导航栏固定）

3 个答案: