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 ...
随机推荐
- 容器云平台No.10~通过gogs+drone+kubernetes实现CI/CD
什么是CI/CD 持续集成(Continous Intergration,CI)是一种软件开发实践,即团队开发成员经常集成它们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每 ...
- vue+less换肤，主题切换方案
新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案. https://www.cnblogs.com/leiting/p/11203383 ...
- Python-进程-进程池-原理
进程 资源集合,调度和分配资源,说到进程就不得不提到线程,线程和进程是密不可分,进程申请了资源,但真正使用资源的是线程,其实本质上类似面向对象的思想,面向对象把数据和数据的操作封装在一个类中,进程把资 ...
- const放在函数前后的区别
转载:const放在函数前后的区别 一.const修饰指针 int b = 500; 1.const int * a = & b; 2.int const * a = & b; 3.i ...
- matlab中fopen 打开文件或获得有关打开文件的信息
参考:https://ww2.mathworks.cn/help/matlab/ref/fopen.html?searchHighlight=fopen&s_tid=doc_srchtitle ...
- 从远程库github.com克隆代码时遇到了如下的问题：
Warning: Permanently added the RSA host key for IP address '13.250.177.223' to the list of known hos ...
- 4-K8S 部署Java应用及应用程序生命周期管理
1.在kubernetes中部署应用程序流程 准备项目源码-->编译构建-->产出war包,打包到镜像中-->推送到镜像仓库 获取源代码是开发人员提交代码的代码托管地址,有Git.S ...
- 用c语言实现linux cat
话不多说,直接上代码: #include <stdio.h> void file_copy(FILE * file1,FILE * file2); int main(int argc,ch ...
- 下载 node.js 步骤 bower npm 报错解决
1,下载node.js ,安装之后就可以 了 2,解决"npm不是内部或外部命令" ,打开安装的node.js 的文件夹 将这个地址,放在环境变量里面 <1,属性环境 ...
- ansible-playbook-roles目录结构
1. ansible-角色-roles目录结构 角色是基于已知文件结构自动加载某些vars_files,任务和处理程序的方法.按角色对内容进行分组还可以轻松与其他用户共享角色. ...