js 实现吸顶效果 || 小程序的吸顶效果

小程序吸顶效果

<!--index.wxml-->

<view class="container">

  <view class='outside-img'>

    <view class='outside-box'>

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

    </view>

  </view>

  <view class='inside-img'>

    <view class='outside-box'>

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

    </view>

  </view>

  <view class='content-group'>

    <view class='heade-title'>

      我是标题

      <view>

        我是子标题

      </view>

    </view>

    <view class="nav-group {{isFlixed ? 'flixedclass': ''}}">

      <view>导航一个</view>

      <view>导航一个</view>

      <view>导航一个</view>

      <view>导航一个</view>

    </view>

    <view class='content-text'>

      <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><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view>

    </view>

  </view>

</view>

//index.js

//获取应用实例

const app = getApp()

Page({

  data: {

    getDeomtop: '',

    isFlixed: false

  },

  onLoad: function () {

    var that = this;

    wx.createSelectorQuery().select('.nav-group').boundingClientRect(function (rect) {

      that.setData({ getDeomtop: rect.top })

    }).exec()

  },

  onPageScroll(e) {

    var that = this

    var domeHeight = that.data.getDeomtop

    var isScrollTop = e.scrollTop

    console.log(domeHeight)

    console.log(e.scrollTop)

    if (isScrollTop >= domeHeight) {

      that.setData({ isFlixed: true })

      console.log(that.data.isFlixed)

    }else {

      that.setData({ isFlixed: false })

    }

  }

})

/**index.wxss**/

.outside-img {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  z-index: -1;

}

.outside-box {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

}

.show-eg-img {

  position: absolute;

  left: 0;

  top: 0;

  height: 220px;

  width: 100%;

}

.inside-img {

  position: fixed;

  left: 0;

  top: 0;

  height: 100rpx;

  width: 100%;

  z-index: 10;

  overflow: hidden;

}

.nav-group {

  display: flex;

  position: relative;

  z-index: 12;

  height: 100rpx;

  line-height: 100rpx;

}

.nav-group  view {

  flex: 1;

  color: #666;

  text-align: center;

}

.heade-title {

  position: relative;

  z-index: 11;

  font-size: 34rpx;

}

.content-text view {

  height: 300rpx;

  line-height: 300rpx;

}

.flixedclass {

  position: fixed;

  width: 100%;

  left: 0;

  top: 0;

}

简单的吸顶效果

<!DOCTYPE>

<html>

<head>

<style type="text/css">

    body {

        padding:0;

        margin:0;

    }

    #nav {

        width:100%;

        height:60px;

        background:#39f;

        color:#fff;

        line-height:60px;

        text-align:center;

        padding:0;

        margin:0;

    }

    #nav li {

        float:left;

        width:20%;

        height:60px;

    }

    .fix {

        position:fixed;

        top:0;

        left:0;
        z-index: 1;

    }

    .hader-img {

        position: fixed;

        left: 0;

        top: 0;

    }

    .content {

        position: relative;

        z-index: 2;

    }

</style>

</head>

<div class="wrap">

    <div class="hader-img">

        <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="">

    </div>

    <div class="content">

        <div class="header">

            <h1>商城标题</h1>

            <p>子标题子标题子标题子标题子标题子标题子标题</p>

            <ul id="nav">

                <li>导航内容</li>

                <li>导航内容</li>

                <li>导航内容</li>

            </ul>

        </div>

        <div class="con">

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

            <p>这个是一个吸顶效果，吸顶效果啊</p>

        </div>

    </div>

</div>

<script type="text/javascript">

let headerNav = document.getElementById("nav");

//占位符的位置

let rect = headerNav.getBoundingClientRect();

//获得页面中导航条相对于浏览器视窗的位置

let childDemoe = document.createElement("div");

headerNav.parentNode.replaceChild(childDemoe, headerNav);

childDemoe.appendChild(headerNav);

childDemoe.style.height = rect.height + "px";

//获取距离页面顶端的距离

var headerNavleTop = headerNav.offsetTop;

//滚动事件

document.onscroll = function(){

    //获取当前滚动的距离

    var btop = document.body.scrollTop||document.documentElement.scrollTop;

    //如果滚动距离大于导航条据顶部的距离

    if(btop>headerNavleTop){

        //为导航条设置fix

        headerNav.className = "clearfix fix";

    }else{

        //移除fixed

        headerNav.className = "clearfix";

    }

}

</script>

</html>

后续优化

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

微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
微信小程序实现淡入淡出效果（页面跳转）
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 <view class=" ...
小程序 - 图片列表显示lazyload效果
在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view& ...
微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
JS 条形码插件--JsBarcode 在小程序中使用
在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...
微信小程序动态显示项目倒计时效果
效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...
[原创]微信小程序实现圆环百分百效果
1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层) ,其中灰色和红色层大小一 ...
微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

随机推荐

hw小技巧（转载）
小弟也第一次参加hw,经过5天hw,确实也学到了许多的东西,但就本次分享而言,我分享一些我认为在hw里面值得注意的东西以及一些小技巧 0x01 信息收集信息收集这个多西当然都是老生常谈了,你收集的东 ...
2019.8.14 sdfzoier
zhaojinxi wxk: lixf zhangtingyu wu jialin zhangjinhao liuxinyang zhoukaixuan
sping aop 源码分析（-）-- 代理对象的创建过程分析
测试项目已上传到码云,可以下载:https://gitee.com/yangxioahui/aopdemo.git 具体如下: public interface Calc { Integer add( ...
uni-app支付功能
扫码查看原文前言近期一直在使用APP开发多端应用,IOS的APP.安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用前置条件: 开发环境:windo ...
ksoap2-android的简单使用
soap2-android 官网地址 https://simpligility.github.io/ksoap2-android/index.html 发行版本 https://oss.sonatyp ...
Python-全局解释器锁GIL原理和多线程产生原因与原理-多线程通信机制
GIL 全局解释器锁,这个锁是个粗粒度的锁,解释器层面上的锁,为了保证线程安全,同一时刻只允许一个线程执行,但这个锁并不能保存线程安全,因为GIL会释放掉的并且切换到另外一个线程上,不会完全占用,依据 ...
C文件读写(二进制/文本文件)整理
目录 [TOC] 打开文件使用fopen打开文件,在<stdio.h>头文件中,其声明如下: FILE * fopen ( const char * filename, const ch ...
Java知识系统回顾整理01基础06数组06二维数组
一.一维数组和二维数组这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维数组 ...
ECMASctipt6总结
1.let 变量声明以及特性声明变量 let a; let b, c, d; let e = 1; let f = 2, g = 3; 特性 1.不能重复声明 2.块级作用域只在块级作用域有效 ...
[WC 2011]最大Xor和路径
题目大意: 给你一张n个点,m条边的无向图,每条边都有一个权值,求:1到n的路径权值和的最大值. 题解: 任意一条路径都能够由一条简单路径(任意一条),在接上若干个环构成(如果不与这条简单路径相连就走 ...

js 实现吸顶效果 || 小程序的吸顶效果

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

随机推荐

热门专题