<!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
