Question

我有一个sidebar，它固定在左侧，一些内容可以在侧边栏的右侧滚动，footer在我的angular-material页面的底部。现在的问题是，当我开始滚动并到达页脚时，边栏越过页脚。我想要的是，当页脚开始出现在屏幕上时，边栏不应保持固定状态，而应开始滚动，以使其不会越过页脚。在计算屏幕的可见高度但没有运气之后，我尝试通过fixed添加和删除typescript类。

我的HTML：

<div class="container">

    <!-- toolbar here -->


    <ol class="side-bar-container"> <!--sidebar-->
        <li class="side-bar-heading">
            <mat-icon class="sort-icon">sort</mat-icon>
            <span>Finjuster din søgning</span>
        </li>
        <div class="sidebar-content-container">
            <li class="side-links search-area sidebar-section-margin">
                <label class="sidebar-label">Søg</label>
                <form [formGroup]="stateForm">
                    <mat-form-field class="search-field" appearance="outline">

                        <input type="text" matInput placeholder="Søgeord – Hvad ønsker du hjælp til"
                            formControlName="stateGroup" required [matAutocomplete]="autoGroup">
                        <mat-icon matSuffix class="search-icon">search</mat-icon>


                        <mat-autocomplete #autoGroup="matAutocomplete">
                            <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
                                <mat-option *ngFor="let name of group.names" [value]="name">
                                    {{name}}
                                </mat-option>
                            </mat-optgroup>
                        </mat-autocomplete>
                    </mat-form-field>
                </form>

            </li>
            <mat-divider></mat-divider>

            <mat-form-field class="search-field sidebar-section-margin" appearance="outline">
                <mat-label>Støtteform</mat-label>
                <mat-select>
                    <mat-option *ngFor="let item of firstDrop" [value]="item.value">
                        {{item.viewValue}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-divider></mat-divider>

            <!-- some more list items -->

        </div>


    </ol>

    <div class="searched-content">
        <!-- content at the right -->
    </div>


    <footer>
        <span>
            <a href="#" class="footer-links">Hjem</a><span class="vertical-divider"></span>
            <a href="#" class="footer-links">Om </a> <span class="vertical-divider"></span>
            <a href="#" class="footer-links"> Hjælp </a> <span class="vertical-divider"></span>
            <a href="#" class="footer-links"> Kontakt os </a> <span class="vertical-divider"></span>
            <a href="#" class="footer-links"> Webstedsbetingelser </a> <span class="vertical-divider"></span>
            <a href="#" class="footer-links"> Fortrolighedspolitik</a>
        </span><br />
        <span class="copyright-section">Copyright &copy; 2020 All Rights Reserved by<h4>&nbsp;<img class="footer-logo"
                    src="../../assets/navbar-logo.png" /></h4></span>
</div>

我的CSS：

.side-bar-container {
    position: fixed;
    width: 25%;
    list-style: none;
    padding-left: 0px;
    margin-left: 4%;
    height: 80%;
    overflow-y: scroll;
}

谢谢。

到达页脚角材料时，向上滚动固定侧栏

0 个答案: