【angular】angular版本吸顶条

原理

  • 通过切换元素class名实现
  • 元素在可视区范围使用class .dt
  • 元素不在可视区范围 定位在顶部 使用class  .ding

demo

  • <!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title>angularjs 版本 吸顶条</title>
        <script src="../js/angular.min.js"></script>
        <style>
            *{
                box-sizing: border-box;
                margin:0; 
                padding:0;
            }
            html{
                height:100%;
            }
            body{
                background-color:#000;
                height: 100vh;
                height:100%;
            }
            .header{
                height:60px;
                line-height:60px;
                color:#fff;
                text-align:center;
            }
            .box{
                width:960px;
                height:calc(100% - 160px);
                padding:30px;
                margin:0 auto 100px;
                background-color:#fff;
                overflow: auto;
            }
            .box-header{
                height:297px;
                padding:30px;
                border:1px solid #dedede;
            }

            .content{
                margin-top:30px;
            }
            .content-txt{
                height:30px;
                line-height:30px;
                line-height:1.5;
            }
            .dt{
                height:50px;
                line-height:50px;
                background-color: yellow;
            }
            .ding{
                position:fixed;
                top:60px; 
                width:900px;
                height:50px;
                line-height:50px;
                margin:0 auto;
                
               background-color: yellow;
            }
        </style>
        <script>
            angular.module('myApp',[]).controller('DemoController',function($scope, $timeout){
                var oDiv = null, oDivTop;
                $timeout(function () {
                    oDiv = document.getElementById("demo");//获取div元素
                    oDivTop = oDiv.getBoundingClientRect().top;
                }, 1000);
                $scope.myFunction = function(ele) {
                    var scrollTop = ele.scrollTop;//滚动距离
                    console.log(oDivTop, scrollTop, oDivTop < scrollTop);
                    if(oDivTop < scrollTop) { 
                        oDiv.className = 'ding';
                    } else {
                        oDiv.className = 'dt';
                    }
                }
            })
        </script>
    </head>
    <body ng-controller="DemoController">
        <div class="header">标题</div>
        <div class="box" onscroll="angular.element(this).scope().myFunction(this)">
            <div class="box-header">内容</div>
            <div class="content">
                <div class="dt" id="demo">吸顶条</div>
                <div class="content-txt" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]">战胜疫情,加油{{item}}</div>
            </div>
        </div>
    </body>
</html>
    View Code
  • angular.element()  //返回一个jquery对象
  • angular.element(this).scope() //返回指定元素的scope

效果

 

posted on 2020-03-25 10:29  smile轉角  阅读(388)  评论(0)    收藏  举报

导航