css样式之页面上拉指定div置顶

最近做项目写页面用到一个功能效果——–>当页面滑动过程中，如果标题部分已经到顶部了，那么标题部分就应该被置顶而不是随着页面内容而消失。

完成这种效果只要两步：
1.获取窗体Y轴滚动事件，来获取当前div的高度。
2.通过滚动事件判断当前div高度的变化值是否大于距离顶部的距离。如果是则通过css样式来固定位置，如果不是则static。

我这里是用到angular4 以及jquery来操作dom

<div class="card-block">
        <div class="row">
            <div class="col-md-12">
                <!-- 当标题高度距离顶部某一距离时悬浮 -->
                <div id="fixedMenu_keleyi_com" #titleDetails>
                    <div class="row">
                        <div class="col "> <h5 class="font-weight-bold text-primary"><i class="icon-briefcase"></i> MXXXX</h5></div>
                        <div class="col-10">
                            <button type="button" class="btn btn-primary">立即访问</button>
                            <button type="button" class="btn btn-info">续租</button>
                            <button type="button" class="btn btn-primary">升级</button>
                            <button type="button" class="btn btn-success">授权</button>
                        </div>
                    </div>

                <hr>
                </div>
                <!-- 这是摘要  -->
                <div class="card-text row pt-3" id="title_content">
                    <div class="text-left col-md-3">
                        <span class="badge badge-pill badge-primary">提供商：</span>&nbsp;实打实大师大所多
                    </div>
                    <div class="text-center col-md-3">
                        <span class="badge badge-pill badge-primary">规格：</span>&nbsp;内存：1G；硬盘1T
                    </div>
                    <div class="text-right col-md-3">
                        <span class="badge badge-pill badge-primary">到期时间：</span>&nbsp;2020-12-31
                    </div>

                    <!--<div class="mt-2 text-right">-->
                    <!--<a [routerLink]="['/console/product/order']" class="btn btn-primary">立即购买</a>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>

 @ViewChild('titleDetails') _selector:ElementRef;

 @HostListener('window:scroll')
    _onWindowScroll():void {
        let el = this._selector.nativeElement;
        console.log("元素内容="+el.toString());
        console.log("window.scrollY="+window.scrollY);
        window.scrollY >= 71 ? jQuery(el).css(
            {"position":"fixed","z-index":"1","top":"50px",
              "font-weight": "$font-weight-bold","color":"blue",
                "background-color":"rgba(135,206,255,0.3)","width":"80%",
                "padding-top":"25px"
            })
            : jQuery(el).css({"position":"static","width":"95%", "background-color":"white"});
    }

说明：这些@事件都是angular的
1.@ViewChild(‘titleDetails’)是指获取模板里指定元素中的变量。
2.@HostListener(‘window:scroll’)是指获取监听事件，这里是获取窗体滚动事件。
3.我这里是判断滚动距离是否大于等于71。这个71是通过自己先滚动窗体打印输出得到的->top:0px;距离div的高度。如果大于等于了说明当前div已经置顶了。则通过css语句使div固定并且保持在最外层。
如果小于则把位置设置为static。让其div恢复原状(如果没理解错的话)。

这些都是我自己试了N多次的结果。反正思路是一样的，不知道还有没更好的解决方式。