的CSS - 邊欄帶有固定標題

這裏首先是代碼 - http://plnkr.co/edit/Iq9bjzCljALHORYIRvhe?p=preview 的CSS - 邊欄帶有固定標題

現在，你可以看到有兩個部分 - 側邊欄標題，用紅色的背景顏色，以及側邊欄項目，這與黑色的背景顏色。

現在，我試圖讓滾動僅在側邊欄的黑色背景部分可用，這意味着紅色標題是固定的。

我該怎麼做？

這裏的HTML代碼 -

<html ng-app="app"> 

<head> 
    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 

    <div class="container"> 
     <div ng-controller="SidebarController"> 
      <a href="#" id="navigation-toggle" ng-click="toggleState()">Navigation</a> 
      <div class="sidebar" sidebar-directive="state"> 
       <div class="topmenu">Menu</div> 

       <ul class="navigation"> 
        <li class="navigation-items"> <a href="#">Link1</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link2</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link3</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</body> 

</html>

和這裏的CSS代碼 -

body { 
    font-family: arial; 
} 
.sidebar { 
    position: absolute; 
    top: 0; 
    left: -160px; 
    transition: 100ms left; 
    height: 100%; 
    overflow-y: auto; 
} 
#navigation-toggle { 
    position: absolute; 
    left: 160px; 
    background: rgba(3, 159, 244, .95); 
    color: white; 
    text-decoration: none; 
    padding: 20px; 
} 
.show { 
    left: 0; 
} 
.navigation { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.navigation-items a { 
    display: block; 
    background-color: #444; 
    color: white; 
    line-height: 2em; 
    text-decoration: none; 
    padding: 10px 30px; 
    width: 100px; 
} 
.navigation-items a:hover { 
    background-color: #222; 
} 
.topmenu { 
    background-color: #f00; 
    height: 70px; 
}

來源

2015-11-05 4this

在你plunker不會有一個紅色標題行不通的。請使用正確的代碼更新。 –

好了，現在我看到的。我更新你的搶劫者。見它的工作：

http://plnkr.co/edit/SwyhsdfeJtaNX7WU0Kao?p=preview

的變化是如此簡單：

.sidebar { 
    overflow:hidden; 
} 
.navigation: { 
    height: calc(100% - 70px); 
    overflow:auto; 
}

而這一切。

來源

2015-11-05 09:44:10

你的CSS：

.sidebar { 
      position :fixed; 
      top : 0; 
      left : -160px; 
      transition : 100ms left; 
      border: 1px solid #f00; 
      height : 100%; 
     } 

.navigation { 
      list-style : none; 
      padding : 0; 
      margin : 0; 
      height:100%; 
      overflow-y:scroll; 

     }

http://plnkr.co/edit/AUzowwf0AOC9U7QLUlOW?p=preview

來源

2015-11-05 09:46:13

感謝您的幫助，但是我不知道您是否注意到當側欄關閉時可以看到滾動條 – 4this

您歡迎，只需設置'.sidebar {left：-175px;}'即可完成，但是我的代碼不適合，因爲在更新之前我看不到紅色框，所以需要將'ul'高度設置爲'calc（100％ - 70px）;'但在我的情況下我無法知道它的高度 –

的CSS - 邊欄帶有固定標題

回答

相關問題