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 ...
随机推荐
- 7.kafka HA
- .NET 5 中 Target Framework 详解
作者:.NET Team 翻译:精致码农-王亮 原文:http://dwz.win/Q4v 我们希望极大地简化开发人员必须在项目文件和 NuGet 包中使用的TFM (Target Framework ...
- Spring学习（二）Spring IoC 和 DI 简介
一.IOC(控制反转) 定义:反转控制 (Inversion Of Control)的缩写,即创建对象的反转控制. 正向控制:若要使用某个对象,需要自己去负责对象的创建. 反向控制:若要使用某个对象, ...
- @RequiresPermissions注解的作用，超级简单的权限验证
是shiro里面权限验证的一个注解 @RequiresPermissions(value = {"engineeringPause:download", "workCon ...
- 【Processing-日常3】等待动画1
之前在CSDN上发表过: https://blog.csdn.net/fddxsyf123/article/details/79755976
- macOS提示“将对您的电脑造成伤害……“进阶版
> 很多小伙伴在更新完系统后运行应用会闪退以及提示"xxxx 将对您的电脑造成伤害. 您应该将它移到废纸篓",本文将针对此问题提供解决方法.如图: { element.onscroll = func ...
- 使用deeplabv3+训练自己数据集（迁移学习）
概述 在前边一篇文章,我们讲了如何复现论文代码,使用pascal voc 2012数据集进行训练和验证,具体内容可以参考<deeplab v3+在pascal_voc 2012数据集上进行训练& ...
- Dledger的是如何实现主从自动切换的
前言 hello小伙伴们,今天王子又来继续和大家聊RocketMQ了,之前的文章我们一直说Broker的主从切换是可以基于Dledger实现自动切换的,那么小伙伴们是不是很好奇它究竟是如何实现的呢?今 ...
- 用ASP创建API。NET Core (Day2):在ASP中创建API。网络核心
下载PDF article - 1.5 MB 下载source - 152.4 KB 下载source - 206.3 KB 下载source code from GitHub 表的内容 中间件路线图 ...