Question

首先，这是代码 - http://plnkr.co/edit/Iq9bjzCljALHORYIRvhe?p=preview

现在，您可以看到有两个部分 - 侧边栏标题，红色背景颜色和侧边栏项目，黑色背景颜色。

现在，我想要的是让滚动仅在侧边栏的黑色背景部分可用，这意味着红色标题是固定的。

我怎么能这样做？

这是html代码 -

<packaging>war</packaging>
<properties>
    <failOnMissingWebXml>false</failOnMissingWebXml>
</properties>

这是css代码 -

<html ng-app="app">

<head>
    <script data-require="angular.js@1.3.15" 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>

Answer 1

好的，现在我明白了。我更新你的plunker。看它工作：

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

变化如此简单：

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

这就是全部。

Answer 2

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

Css - 具有固定标题的侧边栏

2 个答案: