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

随机推荐

【JVM系列1】深入分析Java虚拟机堆和栈及OutOfMemory异常产生原因
前言 JVM系列文章如无特殊说明,一些特性均是基于Hot Spot虚拟机和JDK1.8版本讲述. 下面这张图我想对于每个学习Java的人来说再熟悉不过了,这就是整个JDK的关系图: 从上图我们可以看到 ...
关于取整函数ceil(),floor(),round()函数得应用
ceil()返回向上取整最接近的整数. double ceil(double); floor()返回向下取整最接近的整数. double floor(double); round()用于对浮点数的四舍 ...
keras中的mask操作
使用背景最常见的一种情况, 在NLP问题的句子补全方法中, 按照一定的长度, 对句子进行填补和截取操作. 一般使用keras.preprocessing.sequence包中的pad_sequenc ...
论文阅读笔记: Multi-Perspective Sentence Similarity Modeling with Convolution Neural Networks
论文概况 Multi-Perspective Sentence Similarity Modeling with Convolution Neural Networks是处理比较两个句子相似度的问题, ...
zabbix_server.conf配置文件参数
NodeID: 在amster-child 的分布式架构中,这个ID是唯一标识zabbix node的号码 ListenPort:Trapper 类型Item监听的端口, SourceIP: 在连接其 ...
怎样优雅的实现INotifyPropertyChanged
第一安装nuget包 PropertyChanged.Fody. 第二在类的上方加上 [PropertyChanged.AddINotifyPropertyChangedInterface] 类似 ...
IDEA配置jQuery，$符号不再显示黄色波浪线
在使用IDEA搭建Maven的Web环境时,编写的JQuery入口函数时,遇到了未知符号的提示,并且在前端页面js的console里报错. 以下是错误信息: 解决方案: 继续看图: 配置成功生效: ...
探究"补阶乘大法的本质"——糖水不等式！
废话不多说先来康一条例题: 证明: 下面给出题目的一种解法(我称之为"补阶乘大法"): 思考:为什么补上一个阶乘(准确说不是阶乘,是两个数阶乘的之商)项,放缩后再给去掉,就能达到我 ...
Java知识系统回顾整理01基础04操作符07Scanner
一.Scanner 需要用到从控制台输入数据时,使用Scanner类. 二.使用Scanner读取整数注意: 使用Scanner类,需要在最前面加上 import java.util.Scanner ...
vue实现语音播报功能
1,创建一个js文件 (voicePrompt.js) function voicePrompt (text){ new Audio('http://tts.baidu.com/text2audio? ...

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

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

随机推荐

热门专题