简体   繁体   中英

show fixed div (print) while scrolling on table

I have long list table data. on top on table a div which has print button. while scrolling I am missing button because button is on top. I want to show div print left or right of the table while scrolling? when I reaching top again it stay as is.

Is it possible to Jquery and CSS?

 <div class="row" id="printSelectedRecords">
            <div class="col-md-12">
                <span class="col-md-3">
                    <a class="btn btn-default btn-primary" ng-click="showSelectedRecords()" ng-disabled="selectedItems.length==0">
                        Continue to Print
                    </a>
                </span>
            </div>
        </div>
       <br/>
        <table class="table table-bordered">
            <tr>
                <th></th>
                <th>Printed</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Company</th>
                <th>City</th>
                <th>Country</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>
                    <input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)">
                </td>
                <td>
                    {{item.printed}}
                </td>
                <td>
                    {{item.firstName}}
                </td>
                <td>
                    {{item.lastName}}
                </td>
                <td>
                    {{item.company}}
                </td>
                <td>
                    {{item.city}}
                </td>
                <td>
                    {{item.country}}
                </td>
            </tr>
        </table>

您尝试使用位置:固定在此按钮上吗?

You can try this css to position the button on the bottom right of the page

.fixed-button {
    position: fixed;
    bottom: 0;
    right: 0; 
}

<div class="row fixed-button" id="printSelectedRecords">
            <div class="col-md-12">
                <span class="col-md-3">
                    <a class="btn btn-default btn-primary" ng-click="showSelectedRecords()" ng-disabled="selectedItems.length==0">
                        Continue to Print
                    </a>
                </span>
            </div>
        </div>

If you want the button the stay at the top then change the css (top: 0) accordingly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM