Question

我目前使用的垂直导航css：

.vertical-nav {
     position: fixed;
     top: 105px; /* distance to the top of the menu div from the top of the page */
     width:130px; /* width of the menu div */
     height: auto;
     margin: 0;
     padding: 5px;
     border: 2px solid #0000FF; /* border width, type and color*/
     border-radius: 10px; /* border-radius */         
     background: rgba(0,0,0, 0.5); /* Menu background color with opacity - delete if not required */
}

// Element with the CSS attached
<div class="sidebar-nav vertical-nav"></div>

目前，当我将窗口缩小时，页面左侧的垂直导航栏保持固定，这使得用户有点尴尬。就像一个bootstrap导航栏，我希望当用户调整窗口时，导航栏会浮动到顶部。

有什么想法吗？

实际代码：

 <div class="sidebar-nav vertical-nav">
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
        <span class="visible-xs navbar-brand">Sidebar menu</span>
      </div>
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
        <ul class="nav navbar-nav demo">
          <li>
            <center><label>FILTER</label></center>
          </li>
        </br>
          <li class="active"><center><input type="checkbox"/>  1</center></li>
          </br>
          <li class="active"><center><input type="checkbox"/>  2</center></li>
          </br>
          <li class="active"><center><input type="checkbox"/> 3</center></li>
          </br>
          <li class="active"><center><input type="checkbox"/>  4</center></li>
          </br>
          <li class="active"><center><input type="checkbox"/>  5</center></li>
          </br>
          <li class="active"><center><input type="checkbox"/>  6</center></li>
          </br>
          <li class="active"><a href="#">7</a></li>
          </br>
          <li class="active"><a href="#">8</a></li>


          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>

          <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
        </ul>
      </div><!--/.nav-collapse -->
      </div>

</div>

Answer 1

position:fixed;

无法移动

，因此您尝试使用

margin-top: 0px;

添加

margin-top: 0px;

Answer 2

使用媒体查询根据浏览器媒体功能自动更改样式，例如宽度，高度和颜色......

    <style>
.vertical-nav {
         position: fixed;
         top: 105px; /* distance to the top of the menu div from the top of the page */
         width:130px; /* width of the menu div */
         height: auto;
         margin: 0;
         padding: 5px;
         border: 2px solid #0000FF; /* border width, type and color*/
         border-radius: 10px; /* border-radius */         
         background: rgba(0,0,0, 0.5); /* Menu background color with opacity - delete if not required */
    }
    @media (max-width: 600px) {
      .vertical-nav {
        top: 0;
    }
    }
    </style>

当窗口缩小时，如何使固定的垂直导航栏浮动到顶部？

2 个答案: