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 ...
随机推荐
- (转)CrudRepository JpaRepository PagingAndSortingRepository之间的区别
1. 简介 本文介绍三种不同的Spring Data repository和它们的功能,包含以下三种: CrudRepository PagingAndSortingRepository JpaRep ...
- 【征文活动】为自己发“声” —— 声网RTC征文大赛在园子里征稿
2020年8月20日,声网Agora入驻园子的新楼盘--博客园品牌专区.9月,我们与声网Agora再度合作,「为自己发"声"- RTC 征文大赛」在园子里征稿. RTC(Real- ...
- linux操作系统网卡漂移导致网络不可用
1.故障描述 公司有100-150台服务器安装RHEL7.4&中标麒麟7.4系统,为方便编辑配置网卡,使用脚本方式配置为biosname=0,ifname=0,目的是为将en1o2p此类长字符 ...
- SpringBoot中pom引入gson异常
在pom中引入gson依赖,启动spring boot项目中报错 Description:An attempt was made to call the method com.google.gson. ...
- 依赖注入在 dotnet core 中实现与使用：4. 集成 Autofac
本示例使用 .net core 5 rc-1 实现. 1. 添加 Nuget 包引用 使用 Autofac 当然要添加 Autofac 的 Nuget 包,主要涉及到两个: Autofac.Exten ...
- Leetcode-剪枝
51. N皇后 https://leetcode-cn.com/problems/n-queens/ n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. ...
- 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源（二）
之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享. ...
- 021 01 Android 零基础入门 01 Java基础语法 03 Java运算符 01 赋值运算符
021 01 Android 零基础入门 01 Java基础语法 03 Java运算符 01 赋值运算符 本文知识点:Java中的赋值运算符 赋值运算符 赋值运算符从右往左运算 赋值运算符左边不能是常 ...
- Jupyter 绘图怎么显示中文
1. 简单加2行代码即可. import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = [u'SimHei'] plt.rcPa ...
- 使用类模板的C++线性表实现（数组方式）
main.h #ifndef _MAIN_H_ #define _MAIN_H_ #include <iostream> #include <exception> #inclu ...