【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>
-
angular.element() //返回一个jquery对象
-
angular.element(this).scope() //返回指定元素的scope
效果
作者:smile.轉角
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
欢迎关注我,一起进步!扫描下方二维码即可加我QQ
![](https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg)