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()方法所以还是本方法手写 <!--wxml--><!--蒙版(渐出淡去效果)--><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 ...
随机推荐
- 2.BlockingQueue-阻塞式队列
- 01 android ndk入门实例之android.mk编译
前言 1 环境 android studio2.3 , window系统 2 ndk https://dl.google.com/android/repository/android-ndk-r16- ...
- 源码分析springboot自定义jackson序列化，默认null值个性化处理返回值
最近项目要实现一种需求,对于后端返回给前端的json格式的一种规范,不允许缺少字段和字段值都为null,所以琢磨了一下如何进行将springboot的Jackson序列化自定义一下,先看看如何实现,再 ...
- dbdeployer MySQL沙盒部署详解
一.工具介绍 前几日用mysql-sandbox来搭建MySQL8.0新版本时发现用不了,提示需要使用dbdeployer才行,瞬间觉得mysql-sandbox不香了,只好咬咬牙来熟悉dbdeplo ...
- UltraEdit文字编辑器菜单热键推荐
键盘映射和自定义菜单热键 任何使用过UltraEdit / UEStudio一段时间的人都可能会告诉您,他们如此喜欢它的原因之一是"几乎所有东西都是可定制的".看一下产品鉴定,您会 ...
- Mysql中 int(3) 类型的含义
注意:这里的(3)代表的并不是存储在数据库中的具体的长度,以前总是会误以为int(3)只能存储3个长度的数字,int(11)就会存储11个长度的数字,这是大错特错的. 其实当我们在选择使用int的类型 ...
- 多线程循环打印数组 -- Java笔记
问题描述: 现有多个长度相同的数组,现要求使用多线程将数组内的数交替打印. 如: int[] ai = {1,2,3,4,5,6,7}; String[] ac = {"A",&q ...
- 03 ArcPython实战篇一
1.自增计算 (字段计算器) total = 0 def accumulate(increment): global total if total: ...
- java安全编码指南之:输入注入injection
目录 简介 SQL注入 java中的SQL注入 使用PreparedStatement XML中的SQL注入 XML注入的java代码 简介 注入问题是安全中一个非常常见的问题,今天我们来探讨一下ja ...
- HanLP的分词统计
HanLP的分词效果鄙人研究了HanLP,他的分词效果确实还可以,而且速度也比较快,10的数据是9000毫秒 @SneakyThrows@Overridepublic LinkedHashMap< ...