Question

我有一个网页，其中当前布局对我很重要。布局有一个导航栏+3列体和底部的全宽条。在我身体的右侧栏杆上，我有一个列表。此列表很长，因此将在窗口内滚动。每当我滚动列表时，它都会滚动到导航栏上方。我已尝试将位置设置为固定和相对。但都没有效果。有人可以帮忙吗？

以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- View meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      DEMO
    </title>

    <!-- Color CSS Styles  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <script src="https://use.fontawesome.com/f87c84f770.js"></script>

    <style type="text/css">
      body, html,  .sidebar, .centerPanel .rhsbar1{
      height: 88%;
      }

      #container{
          width:100%;
          height:100%;
          /* position:absolute; */
          }

      .sidebar{ 
          width:25%;
          float:left;
          height:100%;
          border-right: solid 6px #f1ded9;
          overflow-y: auto;
          }

      .centerPanel {
          background-color: white;
          float:left;
          width:50%;
          height:100%;
          }

      .rhsbar1{
          background-color: white;
          float:right;
          width:25%;
          height:100%;
          border-left: solid 6px #f1ded9;
          overflow-y: auto;
          }

      .navbar {
          height: 20px;
          position: absolute;
          background-color: black;
          width:100%;
          border-bottom: solid 6px #f1ded9;
          }

      #loaded_img_panel  {
          display:block;
          height: 200px;
          position: relative;
          background-color: white;
          overflow: auto;
          white-space: nowrap;
          border-top: solid 6px #f1ded9;
          }

.rhsbar1 .tab {
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.rhsbar1 .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    font-size: 12px;
}

/* Change background color of buttons on hover */
.rhsbar1 .tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.rhsbar1 .tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.rhsbar1 .tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

</style>

</head>
<body>

    <div class="navbar">
    </div>

    <div id="container">

        <div class="sidebar">
        </div>

        <div class="centerPanel">
        </div>

        <div class="rhsbar1">  
          <div class="tab" style="position:fixed;margin:50px 0 0 0;">
              <button class="tablinks" onclick="openActivity(event, 'annotateDirectories')" >Annotate</button>  
            </div>

            <div id="annotateDirectories" class="tabcontent" style="position:relative;margin:60px 0 0 0;">
             <ul>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
             </ul>
            </div>
            <script>
              function openActivity(evt, activeWin) {
                  var i, tabcontent, tablinks;
                  tabcontent = document.getElementsByClassName("tabcontent");
                  for (i = 0; i < tabcontent.length; i++) {
                      tabcontent[i].style.display = "none";
                  }
                  tablinks = document.getElementsByClassName("tablinks");
                  for (i = 0; i < tablinks.length; i++) {
                      tablinks[i].className = tablinks[i].className.replace(" active", "");
                  }
                  document.getElementById(activeWin).style.display = "block";
                  evt.currentTarget.className += " active";
              }
            </script>
        </div>      
      </div>
        <div id="loaded_img_panel" name="loaded_img_panel" >           
        </div>
</body>
</html>

Answer 1

在导航栏中添加z-index

.navbar{
z-index:999;
}

Answer 2

在CSS中更改此类：

  .navbar {
          height: 20px;
          background-color: black;
          width:100%;
          border-bottom: solid 6px #f1ded9;
          }

只需删除此行：

position: absolute;

Answer 3

我发现您使用过不同网站的来源;可能是其中一个导致了麻烦。

我可以猜测：

将列表放在div

中

<div id="List">
List_items
</div>

然后在css：

 #List {
 width: how_wide_the_nav_section_is px;
 height: how_high_the_nav_section_is px;
 }

我希望这有效。

可滚动div的内容在导航栏上方滚动

3 个答案: