小程序吸顶效果

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view class='outside-img'>
  4.     <view class='outside-box'>
  5.       <image class='show-eg-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565154163445&di=2360e1ec1b7ffee77318f29b0eac3603&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113631e59e358afa40f4afb050b.jpg'></image>
  6.     </view>
  7.   </view>
  8.   <view class='inside-img'>
  9.     <view class='outside-box'>
  10.       <image class='show-eg-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565154163445&di=2360e1ec1b7ffee77318f29b0eac3603&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113631e59e358afa40f4afb050b.jpg'></image>
  11.     </view>
  12.   </view>
  13.   <view class='content-group'>
  14.     <view class='heade-title'>
  15.       我是标题
  16.       <view>
  17.         我是子标题
  18.       </view>
  19.     </view>
  20.     <view class="nav-group {{isFlixed ? 'flixedclass': ''}}">
  21.       <view>导航一个</view>
  22.       <view>导航一个</view>
  23.       <view>导航一个</view>
  24.       <view>导航一个</view>
  25.     </view>
  26.     <view class='content-text'>
  27.       <view>我是一个内容</view>
  28.       <view>我是一个内容</view>
  29.       <view>我是一个内容</view>
  30.       <view>我是一个内容</view>
  31.       <view>我是一个内容</view>
  32.       <view>我是一个内容</view>
  33.       <view>我是一个内容</view>
  34.       <view>我是一个内容</view>
  35.       <view>我是一个内容</view>
  36.       <view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view>
  37.     </view>
  38.   </view>
  39. </view>
  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.   data: {
  7.     getDeomtop: '',
  8.     isFlixed: false
  9.   },
  10.   onLoad: function () {
  11.     var that = this;
  12.     wx.createSelectorQuery().select('.nav-group').boundingClientRect(function (rect) {
  13.       that.setData({ getDeomtop: rect.top })
  14.     }).exec()
  15.   },
  16.   onPageScroll(e) {
  17.     var that = this
  18.     var domeHeight = that.data.getDeomtop
  19.     var isScrollTop = e.scrollTop
  20.     console.log(domeHeight)
  21.     console.log(e.scrollTop)
  22.     if (isScrollTop >= domeHeight) {
  23.       that.setData({ isFlixed: true })
  24.       console.log(that.data.isFlixed)
  25.     }else {
  26.       that.setData({ isFlixed: false })
  27.     }
  28.   }
  29. })
  1. /**index.wxss**/
  2. .outside-img {
  3.   position: fixed;
  4.   width: 100%;
  5.   top: 0;
  6.   left: 0;
  7.   z-index: -1;
  8. }
  9. .outside-box {
  10.   position: absolute;
  11.   left: 0;
  12.   top: 0;
  13.   width: 100%;
  14. }
  15. .show-eg-img {
  16.   position: absolute;
  17.   left: 0;
  18.   top: 0;
  19.   height: 220px;
  20.   width: 100%;
  21. }
  22. .inside-img {
  23.   position: fixed;
  24.   left: 0;
  25.   top: 0;
  26.   height: 100rpx;
  27.   width: 100%;
  28.   z-index: 10;
  29.   overflow: hidden;
  30. }
  31. .nav-group {
  32.   display: flex;
  33.   position: relative;
  34.   z-index: 12;
  35.   height: 100rpx;
  36.   line-height: 100rpx;
  37. }
  38. .nav-group  view {
  39.   flex: 1;
  40.   color: #666;
  41.   text-align: center;
  42. }
  43. .heade-title {
  44.   position: relative;
  45.   z-index: 11;
  46.   font-size: 34rpx;
  47. }
  48. .content-text view {
  49.   height: 300rpx;
  50.   line-height: 300rpx;
  51. }
  52. .flixedclass {
  53.   position: fixed;
  54.   width: 100%;
  55.   left: 0;
  56.   top: 0;
  57. }

简单的吸顶效果

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.     body {
  6.         padding:0;
  7.         margin:0;
  8.     }
  9.     #nav {
  10.         width:100%;
  11.         height:60px;
  12.         background:#39f;
  13.         color:#fff;
  14.         line-height:60px;
  15.         text-align:center;
  16.         padding:0;
  17.         margin:0;
  18.     }
  19.     #nav li {
  20.         float:left;
  21.         width:20%;
  22.         height:60px;
  23.     }
  24.     .fix {
  25.         position:fixed;
  26.         top:0;
  27.         left:0;
            z-index: 1;
  28.     }
  29.     .hader-img {
  30.         position: fixed;
  31.         left: 0;
  32.         top: 0;
  33.     }
  34.     .content {
  35.         position: relative;
  36.         z-index: 2;
  37.     }
  38. </style>
  39. </head>
  40.  
  41. <div class="wrap">
  42.     <div class="hader-img">
  43.         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565094369494&di=7e1e19d2b2d913d3aecbe4fcc67b034a&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201710%2F27%2F6239258bb41622006605f967200b806b.jpg" alt="">
  44.     </div>
  45.     <div class="content">
  46.         <div class="header">
  47.             <h1>商城标题</h1>
  48.             <p>子标题子标题子标题子标题子标题子标题子标题</p>
  49.             <ul id="nav">
  50.                 <li>导航内容</li>
  51.                 <li>导航内容</li>
  52.                 <li>导航内容</li>
  53.             </ul>
  54.         </div>
  55.         <div class="con">
  56.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  57.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  58.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  59.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  60.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  61.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  62.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  63.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  64.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  65.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  66.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  67.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  68.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  69.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  70.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  71.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  72.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  73.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  74.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  75.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  76.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  77.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  78.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  79.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  80.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  81.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  82.             <p>这个是一个吸顶效果，吸顶效果啊</p>
  83.         </div>
  84.     </div>
  85. </div>
  86.  
  87. <script type="text/javascript">
  88. let headerNav = document.getElementById("nav");
  89. //占位符的位置
  90. let rect = headerNav.getBoundingClientRect();
  91. //获得页面中导航条相对于浏览器视窗的位置
  92. let childDemoe = document.createElement("div");
  93. headerNav.parentNode.replaceChild(childDemoe, headerNav);
  94. childDemoe.appendChild(headerNav);
  95. childDemoe.style.height = rect.height + "px";
  96.  
  97. //获取距离页面顶端的距离
  98. var headerNavleTop = headerNav.offsetTop;
  99. //滚动事件
  100. document.onscroll = function(){
  101.     //获取当前滚动的距离
  102.     var btop = document.body.scrollTop||document.documentElement.scrollTop;
  103.     //如果滚动距离大于导航条据顶部的距离
  104.     if(btop>headerNavleTop){
  105.         //为导航条设置fix
  106.         headerNav.className = "clearfix fix";
  107.     }else{
  108.         //移除fixed
  109.         headerNav.className = "clearfix";
  110.     }
  111. }
  112. </script>
  113. </html>

    后续优化

js 实现吸顶效果 || 小程序的吸顶效果的更多相关文章

  1. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  2. 微信小程序实现淡入淡出效果（页面跳转）

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...

  3. 小程序 - 图片列表显示lazyload效果

    在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view& ...

  4. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

  5. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  6. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

  7. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  8. [原创]微信小程序 实现 圆环 百分百效果

    1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层)  ,其中灰色和红色层大小一 ...

  9. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

随机推荐

  1. Mac使用Charles给iPhone抓包流程

    目录 需求 步骤 1. Mac打开共享Wifi 2. iPhone连接刚刚的WIFI 3. 找到Mac的局域网ip 4. 配置代理 需求 有时候手机接口出问题了,不知道从哪里下手,Charles就是非 ...

  2. java关键字static和final

    static可以修饰变量,方法或者类(普通类是不能用static修饰的,只能用来修饰内部类) static静态变量又称之为类变量(和c++中的全局变量概念是一样的),在类加载后,jvm只为类变量分配一 ...

  3. Unity 自己使用顶点描绘圆形UI图片

    2020-09-10 在游戏的UI中,圆形图片的需求是很高的,但是,在Unity中想要实现圆形UI,一般的做法是是使用圆形Mask(遮罩),但是使用Mask的缺点很明显,主要有三点: 1.比较麻烦,使 ...

  4. react 中发布订阅模式使用

    react 中发布订阅模式使用 场景 怎么能将设计模式应用到我们的 React 项目中?以前一直在思考这个问题. 场景一 模块 A 模块 B 需要用到同一个数据 data,A 和 B 都会修改这份数据 ...

  5. @DependsOn注解的使用

    如果Bean A 在创建前需要先创建BeanB此时就可以使用DependsOn注解 @Configuration public class MyConfig { @Bean @DependsOn(&q ...

  6. Redis小记（二）

    1.redis数据库 redis数据库属于内存数据库,若不将数据存到磁盘中,服务器进程退出,数据也会消失 redis所有数据库都保存在redisServer结构的db数组中,db数组的每一项都是一个r ...

  7. Istio 运维实战系列（3）：让人头大的『无头服务』-下

    本系列文章将介绍用户从 Spring Cloud,Dubbo 等传统微服务框架迁移到 Istio 服务网格时的一些经验,以及在使用 Istio 过程中可能遇到的一些常见问题的解决方法. 失败的 Eur ...

  8. 用ThreadLocal来优化下代码吧

    最近接手了一个老项目,看到一个很有意思的现象. 这个项目中大量的方法入参都会带上user信息,比如这样 它的意图是希望在方法内使用user的信息,但是如此大范围的传递用户信息,第一感觉就是不优雅.那有 ...

  9. 手把手教你ASP.NET Core：使用Entity Framework Core进行增删改查

    新建表Todo,如图 添加模型类 在"解决方案资源管理器"中,右键单击项目. 选择"添加" > "新建文件夹". 将文件夹命名为 Mo ...

  10. Spring Cloud系列（四）：Eureka源码解析之客户端

    一.自动装配 1.根据自动装配原理(详见:Spring Boot系列(二):Spring Boot自动装配原理解析),找到spring-cloud-netflix-eureka-client.jar的 ...