【angular】angular版本吸顶条

冰水临界 發表於 2020-3-25 10:29:00

<h2>原理</h2>
<ul>
<li>通过切换元素class名实现</li>
<li>元素在可视区范围使用class .dt</li>
<li>元素不在可视区范围定位在顶部使用class  .ding</li>
</ul>
<h2>demo</h2>
<ul>
<li>
<div class="cnblogs_code"><img id="code_img_closed_8ad1ce7e-8c2d-40fc-a157-f68649e17f41" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_8ad1ce7e-8c2d-40fc-a157-f68649e17f41" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_8ad1ce7e-8c2d-40fc-a157-f68649e17f41" class="cnblogs_code_hide">
<pre><!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 ">战胜疫情,加油{{item}}</div>
 </div>
 </div>
</body>
</html></pre>
</div>
View Code</div>
</li>
<li>
<div>angular.element()  //返回一个jquery对象</div>
</li>
<li>
<div>angular.element(this).scope() //返回指定元素的scope</div>
</li>
</ul>
<h2>效果</h2>
<img src="https://img2020.cnblogs.com/i-beta/880812/202003/880812-20200325105711790-412855653.gif" alt="">
 

</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">
 <div>作者：smile.轉角</div>
 <div>出处：https://www.cnblogs.com/websmile/</div>
 <div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.</div>
</div>
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
欢迎关注我，一起进步！扫描下方二维码即可加我QQ
<img class="img_zfb" id="img_zfb" src="https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg">

</div> 
来源：https://www.cnblogs.com/websmile/p/12564407.html

頁: [1]

琼殿技术论坛's Archiver

【angular】angular版本吸顶条